react-native (expo)에서 한글 단어 줄바꿈 css word-break keep all 설정 방법

react-native (expo)에서 단어 줄바꿈을 위해 css 기본 옵션인 word-break keep-all 처럼 한글 단어별 줄바꿈 처리 방법을 알아봅니다.

• react-native 0.79.4
• expo ~53.0.13

react native (expo)는 일반 react 처럼 css style을 react-native에서 제공하는 StyleSheet를 사용해 ui를 아름답게 만들수 있습니다.

ui를 꾸미면서 가끔 한글의 단어 줄바꿈 이용해 단어별 줄바꿈이 필요할때가 있습니다만,

react-native에선 css 처럼 word-break를 지원하지 않습니다.

이미지 줄바꿈 안되는 예시

기본적으로 한글은 단어별 자동 줄바꿈을 제공하지 않습니다. 단, android에서는 기본 단어 줄바꿈이 가능합니다.

react-native의 ios에서 한글 줄바꿈을 표현하기 위해서는 <Text> 컴포넌트에서 lineBreakStrategyIOS={"hangul-word"}를 사용해아합니다.

다음은 코드 예시 입니다.

<Text
  style={styles.title}
  numberOfLines={2}
  lineBreakStrategyIOS={"hangul-word"}
>
  {festival.title}
</Text>

위 해당 코드를 사용하면 ios에서 한글 단어 줄바꿈을 할 수 있습니다.

다음은 줄바꿈이 된 ios의 한글 텍스트 입니다.

이미지 줄바꿈 예시

css를 사용하지 않고 Text 컴포넌트의 내장 props 옵션을 사용하여 줄바꿈을 할 수 있습니다.

친절하게도 hangul-word라고 명시되어 있네요.

다음은 공식문서입니다.

global css 같은 것으로 한번에 적용할 순 없겠지만, 필요한곳에서 lineBreakStrategyIOS를 사용하시면 되겠습니다.