JSX에서 줄바꿈이 안되는 이유와 해결법

 

JSX에서는 일반적으로 문자열 내의 \n이 줄바꿈으로 동작하지 않고, 오히려 오류를 발생시키거나 무시된다.

즉, 아래와 같이 작성하면 줄바꿈이 되지 않는다.

const text = "첫 번째 줄\n두 번째 줄";
return <div>{text}</div>;

 

하지만 CSS에서 white-space 속성을 pre-line으로 지정해주면, 문자열 내 \n을 줄바꿈으로 인식하게 되어 의도한 대로 출력할 수 있다.

 

예시:

<div style={{ whiteSpace: 'pre-line' }}>
  {"첫 번째 줄\n두 번째 줄"}
</div>

이렇게 하면 실제 화면에서 아래처럼 줄바꿈이 적용된다.

첫 번째 줄
두 번째 줄