리액트에서 문자열에 '\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>
'Front-End' 카테고리의 다른 글
[끄적끄적] CSS 스타일링 고민 (0) | 2023.11.20 |
---|---|
vite 로컬에서 https 설정 (0) | 2023.08.20 |
Ag gird 정리 (0) | 2023.02.08 |