Text: 개요, 텍스트 표시 및 React Native

React Native에서 Text란

Text는 텍스트 콘텐츠를 표시하기 위한 React Native 컴포넌트입니다. 웹 개발에서 텍스트를 위한 많은 시맨틱 태그가 있는 것과 달리, React Native에서는 모든 텍스트 요소가 Text를 통해 생성됩니다. 이 컴포넌트는 단순한 텍스트뿐만 아니라 중첩된 Text와 스타일링된 조각이 포함된 복잡한 구조도 표시할 수 있습니다.

Text는 자동으로 줄 바꿈을 처리하고 글꼴 모음, 크기, 색상 및 정렬을 관리합니다. 이 컴포넌트는 터치 이벤트(onPress)를 지원하여 추가 래퍼 없이 클릭 가능한 링크를 만들 수 있습니다. 중요한 제한 사항: Text는 View 내에 직접 중첩할 수 없으며, 다른 Text 컴포넌트 내부나 직접 자식으로만 배치할 수 있습니다.

React Native Nested Text, 2024에 따르면, 중첩된 Text 컴포넌트는 부모로부터 스타일을 상속받습니다. 이를 통해 최상위 수준에서 기본 스타일을 설정하고 특정 조각에 대해 개별 속성을 재정의할 수 있습니다 — 웹에서 span이 CSS와 작동하는 방식과 유사합니다.

Text 컴포넌트의 속성 및 API

Text 컴포넌트는 표시, 동작 및 접근성을 제어하기 위한 props 세트를 제공합니다. 주요 카테고리: 스타일 props(글꼴, 크기, 색상, 정렬), 표시 props(numberOfLines, lineBreakMode) 및 대화형 props(onPress, onLongPress).

텍스트 표시 Props

numberOfLines는 표시되는 줄 수를 제한하고 끝에 줄임표를 추가합니다. ellipsizeMode는 줄임표 위치를 제어합니다(head, middle, tail, clip). adjustsFontSizeToFit은 설정된 경계 내에 텍스트를 맞추기 위해 글꼴 크기를 자동으로 줄입니다. lineBreakMode는 numberOfLines를 초과하는 텍스트를 자르는 방법을 결정합니다.

대화형 Props

Text는 터치 처리를 위해 onPress와 onLongPress를 지원합니다. 이를 통해 TouchableOpacity를 사용하지 않고 텍스트 링크를 만들 수 있습니다. onTextLayout은 렌더링 후 텍스트 레이아웃 정보를 반환합니다 — 애니메이션 및 위치 지정에 유용합니다.

플랫폼별 Props

iOS에서는 disabled(텍스트 비활성화), selectable(선택 활성화), dataDetectorTypes(링크, 전화번호, 주소 자동 감지)를 사용할 수 있습니다. Android에서는 selectable(textSelectable을 통해)과 includeFontPadding(추가 패딩 제거)을 사용할 수 있습니다.

Text와 HTML p 및 span 요소의 차이점

Text는 시각적으로 HTML 태그 p 및 span과 유사하지만 아키텍처 차이가 상당합니다. React Native에는 시맨틱 텍스트 요소가 있는 DOM 모델이 없으며, 모든 텍스트 노드는 다양한 props를 가진 단일 Text 컴포넌트를 통해 처리됩니다.

핵심 차이점은 Text 중첩을 통한 스타일 상속입니다. 외부 Text에 fontSize: 18과 color: blue가 있으면 모든 중첩된 Text 컴포넌트가 이 스타일을 상속받습니다. 내부 Text에서 특정 값을 설정하여 모든 props를 재정의할 수 있습니다. 이렇게 하면 코드가 절약되고 구조가 더 깔끔해집니다.

텍스트 스타일링 및 글꼴

Text는 타이포그래피를 위한 대부분의 CSS 속성을 지원합니다: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. React Native에서 글꼴은 @font-face가 아닌 플랫폼 수준에서 연결됩니다.

사용자 정의 글꼴 사용

사용자 정의 글꼴을 사용하려면 assets/fonts 폴더에 추가하고 react-native.config.js에서 지정해야 합니다. 애플리케이션을 다시 빌드하면 fontFamily를 통해 글꼴을 사용할 수 있습니다. React Native는 웹 글꼴(Google Fonts)을 직접 지원하지 않으며 .ttf 또는 .otf 파일을 다운로드해야 합니다.

스타일 상속 및 캐스케이드

Text의 상속 메커니즘은 CSS와 다릅니다. 스타일은 Text에서 중첩된 Text로만 전달되며 View에서 Text로는 전달되지 않습니다. 전체 애플리케이션에 글꼴을 설정하려면 Text 컴포넌트의 defaultProps 또는 사용자 정의 래퍼 컴포넌트를 사용합니다.

<Text style={{ fontSize: 18, color: '#333' }}>
    This text is 18px and color #333
    <Text style={{ fontWeight: 'bold', color: '#007AFF' }}>
        bold and blue
    </Text>
    back to #333 color
</Text>

이 예제에서 외부 Text는 fontSize: 18과 color: #333을 설정합니다. 내부 Text는 fontSize(18)를 상속받지만 fontWeight를 bold로, color를 #007AFF로 재정의합니다. 외부 Text는 자신의 스타일만 상속받습니다. 이는 HTML에서 중첩된 span이 작동하는 방식과 정확히 유사합니다.

Text를 사용한 실용 예제

React Native에서 Text의 두 가지 일반적인 사용 사례를 살펴보겠습니다: 중첩을 사용한 텍스트 서식 지정과 줄 제한이 있는 클릭 가능한 컴포넌트 만들기입니다.

예제 1: 서식이 있는 뉴스 카드

이 예제에서는 Text를 사용하여 강조 표시된 요소(제목, 날짜, 링크가 있는 콘텐츠)가 포함된 여러 줄 텍스트를 표시합니다.

const NewsCard = ({ title, date, content }) => (
    <View style={styles.card}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.date}>{date}</Text>
        <Text style={styles.content}>
            {content}
            {' ' }
            <Text
                style={styles.link}
                onPress={() => Linking.openURL(url)}
            >
                Read more
            </Text>
        </Text>
    </View>
);

이 구조에는 각각 고유한 스타일을 가진 세 개의 독립적인 Text 컴포넌트(제목, 날짜, 콘텐츠)가 있습니다. 콘텐츠 Text 내부에는 링크를 위한 onPress가 있는 또 다른 Text가 중첩되어 있습니다. 이 패턴은 뉴스 피드, 블로그 및 댓글에서 사용됩니다.

예제 2: 줄 제한이 있는 텍스트

줄임표가 있는 텍스트 미리보기를 표시하려면 numberOfLines를 사용합니다. 이는 제품 카드 및 기사 목록의 표준 패턴입니다.

<Text
    numberOfLines={2}
    ellipsizeMode="tail"
    style={styles.preview}
>
    {longDescription}
</Text>

numberOfLines = 2 속성은 텍스트를 두 줄로 제한합니다. 텍스트가 더 길면 React Native가 자동으로 두 번째 줄 끝에 줄임표를 추가합니다. ellipsizeMode: 'tail' 매개변수는 줄임표가 끝에 있어야 함을 지정합니다(head, middle 및 clip도 사용 가능).