[RN/Short] React Native Text 줄 넘김에 대해 … 처리 방법 : numberOfLines + ellipsizeMode

해당 글에서는 React-native 환경에서 Text 글이 넘어감에 따라서 ... 처리를 하기 위한 방법에 대해 알아봅니다.

 

1) Text 태그 줄 넘김에 대해 … 처리 방법 : numberOfLines + ellipsizeMode

---

💡Text 태그 줄 넘김에 대해 … 처리 방법 : ellipsizeMode

- 텍스트의 길이가 일정 숫자를 넘어가게 되면 잘리는 현상이 발생합니다. 이에 대해서 긴 문자에 대해, ‘…’으로 잘린 부분에 대해 대체하기 위해 사용이 됩니다.
- 이를 해결하기 위해 Text 속성 중 numberOfLines + ellipsizeMode 속성을 이용합니다.

 

1. Text 태그 속성

---

💡Text 태그 속성

- Text 태그의 속성들로 여러 가지 들이 있지만 주요한 태그들에 대해서만 알아봅니다.

속성	Android	iOS	설명
numberOfLines	✓	✓	텍스트를 표시할 최대 줄 수를 지정
ellipsizeMode	✓	✓	텍스트가 잘릴 때 생략 부호(...) 표시 방식 지정
selectable	✓	✓	텍스트 선택 가능 여부 설정
adjustsFontSizeToFit	✓	✓	텍스트를 컨테이너에 맞게 자동 크기 조정
allowFontScaling	✓	✓	시스템 폰트 크기 변경에 따른 텍스트 크기 조정 허용 여부
textBreakStrategy	✓	-	Android에서 텍스트 줄 바꿈 전략 설정
dataDetectorTypes	-	✓	iOS에서 자동으로 감지할 데이터 유형 지정 (예: 링크, 전화번호)

 

Text · React Native

 
 

2. ellipsizeMode 속성

---

💡ellipsizeMode 속성

- React Native의 Text 컴포넌트에서 사용되는 속성으로, 텍스트가 지정된 줄 수를 초과할 때 어떻게 처리할지를 결정합니다.
- 이 속성은 주로 numberOfLines 속성과 함께 사용되어 긴 텍스트를 효과적으로 표시하는 데 도움을 줍니다.

 

💡 ellipsizeMode 속성의 속성 값

속성값	설명
head	텍스트의 시작 부분을 '...'으로 줄입니다.
middle	텍스트의 중간 부분을 '...'으로 줄입니다.
tail	텍스트의 끝 부분을 '...'으로 줄입니다. (기본값)
clip	'...'을 사용하지 않고 텍스트를 잘라냅니다.

 

Text · React Native

 
 

3. numberOfLines 속성

---

💡numberOfLines 속성

- React Native의 Text 컴포넌트에서 사용되는 속성으로, 텍스트를 표시할 최대 줄 수를 지정합니다.
- 이 속성은 텍스트가 지정된 줄 수를 초과할 때 어떻게 처리할지를 결정하는 데 도움을 줍니다.

import React from 'react';
import { Text, View } from 'react-native';

const TextExample = () => {
  return (
    <View>
      <Text numberOfLines={2} ellipsizeMode="tail">
        이 텍스트는 매우 길어서 두 줄을 초과하게 됩니다. 하지만 numberOfLines 속성으로 인해 두 줄만 표시되고 나머지는 '...'으로 처리됩니다.
      </Text>
    </View>
  );
};

export default TextExample;

 
 

4. numberOfLines + ellipsizeMode 활용 예시

---

 

4.1. 적용 이전 코드

---

💡적용 이전 코드 

- 아래와 같이 width, height를 지정하고 텍스트를 출력하는 경우, 텍스트가 해당 범위를 넘어가게 되면 내용이 잘리는 문제가 발생합니다.
- 중요한 데이터라면 물론, 모두 다 출력하는 것이 맞지만, 중요성이 떨어지고 상세 페이지에서 이를 다 보여줄 수 있는 내용이라면, …으로 생략이 가능합니다.

import React, { useEffect } from "react"
import { Keyboard, Text, TextInput, TouchableWithoutFeedback, View } from "react-native"
const TestScreen = ({ navigation, route }) => {
    return (
        <View>
            <View style={{
                width: 100,
                height: 100,
                marginLeft: 30,
                marginTop: 20,
                flexDirection: "column"
            }}>
                <Text>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세 </Text>
            </View>
        </View>
    )

}
export default TestScreen

 

 
 
 

4.2. 해결방법

---

💡해결 방법
- Text의 속성인 numberOfLines와 ellipsizeMode를 이용하여서 최대 두줄에 대해서 줄 넘김을 허용하고, ellipsizeMode 속성을 통해 tail(꼬리) 부분 잘리는 부분을 … 처리하는 것을 추가합니다.

import React, { useEffect } from "react"
import { Keyboard, Text, TextInput, TouchableWithoutFeedback, View } from "react-native"
const TestScreen = ({ navigation, route }) => {
    return (
        <View>
            <View style={{
                width: 100,
                height: 100,
                marginLeft: 30,
                marginTop: 20,
                flexDirection: "column"
            }}>
                <Text
                    numberOfLines={2}
                    ellipsizeMode="tail"
                >
                    동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세
                </Text>
            </View>
        </View>
    )

}
export default TestScreen

 
 
 

5. numberOfLines + ellipsizeMode 활용 결과화면

---

💡numberOfLines + ellipsizeMode 활용 결과화면

- 아래와 같이 긴 텍스트에 대해 두줄로 한정 짓고, tail(꼬리) 부분 잘리는 부분을 … 처리하는 것을 추가합니다.

 
 
 
 
오늘도 감사합니다. 😀