문제 상황
React에서 문자열에 \n을 넣었는데 화면에서는 줄바꿈이 적용되지 않을 때가 있습니다.
1
2
3
4
5
6
7
const App = () => {
const text = "this is\napple";
return <p>{text}</p>;
};
export default App;
기대하는 결과는 아래와 같습니다.
this is
apple
하지만 실제 화면에서는 한 줄처럼 보일 수 있습니다.
this is apple
이유
HTML은 기본적으로 연속된 공백과 줄바꿈을 하나의 공백처럼 처리합니다.
그래서 JavaScript 문자열 안에 \n이 들어 있어도, 일반적인 <p> 태그 안에서는 줄바꿈이 그대로 표현되지 않습니다.
이 문제는 React만의 문제가 아니라 HTML 렌더링 방식과 관련이 있습니다.
해결 방법 1. white-space 사용하기
가장 자주 사용하는 방법은 CSS의 white-space 속성을 사용하는 것입니다.
1
2
3
4
5
6
7
const App = () => {
const text = "this is\napple";
return <p style=>{text}</p>;
};
export default App;
white-space: pre-line은 문자열 안의 줄바꿈을 유지하면서, 공백은 일반 텍스트처럼 처리합니다.
게시글 본문, 설명 텍스트, 사용자 입력값을 보여줄 때 자주 사용합니다.
해결 방법 2. pre 태그 사용하기
pre 태그를 사용하면 공백과 줄바꿈이 원본 문자열처럼 유지됩니다.
1
2
3
4
5
6
7
8
const App = () => {
const text = `this is
apple`;
return <pre>{text}</pre>;
};
export default App;
다만 pre는 들여쓰기나 여러 공백까지 그대로 보여주기 때문에 일반 문장 UI에는 과하게 느껴질 수 있습니다.
코드나 로그처럼 원본 포맷이 중요한 텍스트에 더 잘 어울립니다.
white-space 값 비교
| 값 | 특징 |
|---|---|
normal | 기본값, 줄바꿈과 연속 공백을 하나의 공백처럼 처리 |
pre | 줄바꿈과 공백을 모두 유지 |
pre-line | 줄바꿈은 유지하고 연속 공백은 정리 |
pre-wrap | 줄바꿈과 공백을 유지하고 자동 줄바꿈도 허용 |
일반적인 사용자 입력 텍스트를 보여줄 때는 pre-line이나 pre-wrap을 많이 사용합니다.
마무리
JSX에서 문자열 안의 \n이 화면에 줄바꿈으로 보이지 않는 이유는 HTML이 공백과 줄바꿈을 기본적으로 정리하기 때문입니다.
문자열의 줄바꿈을 살리고 싶다면 CSS의 white-space 속성을 사용하면 됩니다.
일반 텍스트에는 pre-line, 공백까지 유지해야 하는 코드나 로그에는 pre 또는 pre-wrap을 고려하면 좋습니다.