[React] 리액트에서 텍스트 줄바꿈(개행)하는 방법 (whiteSpace: "pre-wrap")

리액트 개발 중에 줄바꿈이 필요했다. 아래와 같이 입력을 했다.

 

 

1. <textarea> 태그는 기본적으로 줄바꿈이 적용되어 저장된다.

 

이런식으로..

 

contents 가 바로 \n 으로 변환되어 로 저장된 것을 볼 수 있다.

 

화면을 보면, \n 으로 저장된 부분이 개행이 되지 않고 생략되어 출력된다. 

 

줄바꿈을 적용해보자!

 

2. whiteSpace: "pre-wrap" 으로 줄바꿈하기

 

정말 간단하다. p 태그에 스타일 속성을 아래와 같이 넣기만 하면 된다. 

<div className="post-content">
  <p style={{ whiteSpace: "pre-wrap" }}>{data?.contents}</p>
</div>

 

화면에도 줄바꿈이 잘 적용되었다!