React.js p태그 줄바꿈 하는 2가지 방법

서버에서 \n 으로 보내주었다고 하더라도, 프런트가 웹 환경이라면, \n이 자동으로 줄바꿈(개행)이 되지 않습니다.

이럴때 사용하는 2가지 방법이 있습니다.

 

첫번째는, \n을 <br\>로 치환하는 방법이고,

두번째 방법은 \n을 표현해주도록 css를 선언하는 방법입니다.

 

<p style={{ marginTop: 10, marginBottom: 10 }}>
	{ret.content}
</p>

 

원래 위와 같은 코드가 있다고 할때,

 

첫번째 방법부터 보겠습니다.

 

첫번째 방법은 아래와 같습니다.

<p style={{ marginTop: 10, marginBottom: 10 }}>
	{ret.content.split('\n').map((line, index) => (
		<React.Fragment key={index}>
			{line}
			<br />
		</React.Fragment>
	))}
</p>

 

입력된 값에서 \n을 기준으로 분활한후, map을 이용하여, 각 줄 끝에 <br />를 추가하는 방식입니다.

 

두번째 방법 보겠습니다.

두번째 방법은 아래와 같습니다.

<p style={{ marginTop: 10, marginBottom: 10, whiteSpace: 'pre-wrap' }}>
	{ret.content}
</p>

 

css의 white-space 속성을 이용하여, pre-wrap을 선언하면, \n을 개행으로 인식해서 화면에 뿌려줍니다.

 

각자, 스타일에 맞는 방법을 사용해 보세요.