[React Native] 텍스트(Text) 자동 크기 조정 줄바꿈 처리

React Native에서 텍스트(Text) 컴포넌트를 사용할 때, 화면 크기나 내용에 맞게 폰트 크기를 조정하거나

텍스트가 여러 줄로 표시되도록 처리하는 과정을 해야 회전이나 다양한 디바이스에서 텍스트가 잘리지 않도록

자동 크기 조정 기능을 수행할 수 있다.

 

이번 포스팅에서는 내가 프로젝트하며 직면한 문제들과 해결하기 위해 어떻게 풀어나갔는지 작성해보도록 하겠다.

---

첫 번째 문제 : rem 단위 미지원

react-native를 활용한 프로젝트를 진행하고 있는데 react와 달리 rem 이 지원되지 않아 반응형 디자인에 첫 번째 문제가 발생했다.

이를 해결하기 위해 remToPx 함수를 활용하여 rem 단위를 px 단위로 변환하여 사용했다.

import { PixelRatio } from 'react-native';

export const remToPx = (rem) => {
    const baseFontSize = 16;
    const scale = PixelRatio.get();
    return rem * baseFontSize * scale;
};

프로젝트 협업 때 사용한 함수인데 이를 활용해서 동적인 스타일을 계산하는데 사용하였다.

 

*rem : css 에서 사용되는 상대적인 단위로 1rem은 루트 요소의 폰트 크기에 해당된다.

*px : 절대적인 단위, 픽셀 기반

두 번째 문제 : 화면 회전 시 텍스트 크기 조정 x

가로/세로 모드를 실행했을 때 동적으로 박스 크기를 조절하기 위해

useWindowDimensions() 를 사용하자 박스 사이즈만 동적으로 움직이고 text 크기가 움직이지 않아

틀이 깨지는 현상이 발생했다.

왼쪽이 세로모드, 오른쪽이 가로 모드인데 보면 텍스트 크기가 그대로여서 화면에 텍스트가 잘린다.

 

해결 방안

문제를 해결하기 위해 React native 공식 문서에서 Text 기능을 살펴보았다.

 

읽어 보니 Text의 기능인 adjustsFontSizeToFit이

텍스트가 부모 뷰에 맞도록 자동으로 폰트 크기를 조절해준다는 것을 발견했다.

 

numberOfLines 와 함께 써야 제대로 동작한다고 해서

Text 내부에 adjustFontSizeToFit 과 numberOfLines={} 를 추가해주었다.

 

또 글자가 너무 작아지는 것을 방지하기 위해 minimumFontScale 속성을 추가해 주었다.

 

* adjustFontSizeToFit : 부모 컨테이너의 크기에 맞게  텍스트의 폰트 크기 자동 조정

* numberOfLines={1} : 텍스트 한줄로 표시, 텍스트가 박스를 초과할 경우 ... 처리

*minimumFontScale : 텍스트 크기가 너무 작아지지 않도록 최소 폰트 크기 설정

 

 

 

---

1. useWindowDimensions와 텍스트 크기 자동 조정 

const {width, height} = useWindowDimensions();

 

useWindowDimensions 훅을 사용하게 될 경우, 화면 크기에 맞춰 자동으로 크기가가 조정된다.

나는 해당 기능을 활용하여 텍스트가 화면 크기에 맞게 변화하도록 설정하고자 한다.

 

2. adjustFontSizeToFit으로 텍스트 크기 자동 조정

<Text
adjustFontSizeToFit
numberOfLine={1}
>텍스트</Text>

adjustFontSizeToFit은 텍스트가 부모 컨테이너의 크기를 넘지 않도록 자동으로 폰트 크기를 줄여주는 속성이다.

화면 회전 혹은 크기에 맞춰 텍스트 크기를 조정할 수 있다.

 

추가로 사용한 numberOfLine={1}은 텍스트가 한 줄로만 표시되고 박스를 초과하는 경우 ...으로 표시된다.

만약 numberOfLine을 설정하지 않는다면 텍스트가 박스 내 자동 줄바꿈된다.

 

+) 공통 Text 컴포넌트를 만들고 불러서 사용했는데 adjustFontSizeToFit 을 기본으로 해놓으니 카테고리를 만들때

카테고리별 크기에 따라 텍스트의 글자 크기가 일정하지 않은 문제가 발생하여 adjustFontToFit = {adjustFontToFit} 으로

props로 설정하여 true/false 에 따라 고정/가변 크기로 설정될 수 있도록 했다.

 

3. minimumFontScale로 최소 폰트 크기 설정 (추가)

<Text
adjustFontSizeToFit
numberOfLine={1}
minimumFontScale={o.5}
>텍스트</Text>

위에 두가지 속성만 설정하면 해결되지만 박스 사이즈에 맞게 폰트 크기가 너무 작아지는 것을 대비하여

minimumFontScale을 추가로 설정해주었다.

---

 

Text · React Native