기초 · SINCE v0.1.0
Text — 테마의 타이포그래피 역할을 사용하는 Text
Expo와 React Native 화면의 글꼴 크기, 행간, 굵기와 색상을 GJ Kit 테마 역할로 일관되게 표현하는 Text 컴포넌트입니다.
Text 사용 시점과 역할
Text는 React Native Text를 감싸면서 body, caption, label, button, title, heading, tab 역할을 테마와 연결합니다. 색상도 닫힌 color role에서 선택하므로 브랜드 테마를 바꾸면 본문과 제목이 함께 갱신됩니다.
- role 하나로 fontSize, lineHeight, fontWeight, fontFamily를 함께 적용
- color prop에 ThemeColors 키만 허용해 토큰 오타를 타입 검사에서 차단
- style과 className을 마지막에 병합해 필요한 화면별 조정 지원
설치와 최소 예제
Text: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { Text } from '@gj-kit/expo-ui';
<Text role="title" color="text">오늘의 기록</Text>접근성과 플랫폼 동작
React Native Text의 접근성 prop을 그대로 전달합니다. 컴포넌트 전용 role은 시각적 타이포그래피 역할이므로 의미론이 필요할 때 accessibilityRole을 별도로 지정할 수 있습니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.