[React] 문자열 줄바꿈하는 방법

JavaScript에서의 문자열 줄바꿈

JavaScript에서는 문자열을 줄바꿈을 하기 위해 다음과 같이 방법을 사용하였다. (참고 링크)

1. 개행 문자(\n)
2. Template Literal

하지만 React에서는 줄바꿈이 동작하지 않는다.

• 줄바꿈 태그 (<br />)

줄바꿈 태그를 사용해도 <br /> 태그가 문자 그대로 출력된다.

동해물과 백두산이<br/> 마르고 닳도록

 

React에서의 문자열 줄바꿈

React에서는 문자열을 줄바꿈하기 위해 개행 문자(\n)를 사용한 후 CSS 상에서 white-space: pre-wrap을 설정해주면 된다.

white-space: pre-wrap

여기서 pre-wrap 대신 pre-line을 사용할 수도 있는데 차이점은 다음과 같다.

• pre-wrap: 연속 공백 유지
• pre-line: 연속 공백을 하나로 합침

자세한 내용은 공식 문서를 참고한다.