[html]개행 표시하기

리액트에서 문자열에 '\n'이 있는데도 개행이 제대로 되지 않는 경우, 일반적으로 HTML에서는 공백과 개행을 무시하기 때문에 이러한 동작이 발생할 수 있습니다.

이를 해결하기 위해서는 다음과 같은 방법들을 시도해 볼 수 있습니다.

 

1) <pre> 태그 사용

<pre> 태그는 내부의 텍스트를 그대로 표시하고 개행을 유지하는 태그입니다. 문자열을 <pre> 태그로 감싸서 렌더링하면 개행이 제대로 표시될 수 있습니다.

<pre>{yourString}</pre>

 

 

 

2) CSS 속성 사용

CSS의 white-space 속성을 이용하여 개행을 유지하도록 설정할 수 있습니다. white-space: pre-line;을 적용하면 개행이 있는 부분에서 개행이 유지됩니다.

<div style={{ whiteSpace: 'pre-line' }}>{yourString}</div>

 

3) 개행 문자를 <br> 태그로 변환

문자열 내의 '\n'을 <br> 태그로 변환하여 개행을 표시할 수 있습니다. 이를 위해 문자열을 replace 함수를 사용하여 '\n'을 <br> 태그로 치환해주면 됩니다.

<div>{yourString.replace(/\n/g, '<br>')}</div>