html 또는 react에서 /r 또는 /n 으로 줄바꿈(개행)이 안됨

문제

html text
html의 요소 안 텍스트가 /r 또는 /n으로 줄 바꿈을 하고 있는데 줄 바꿈(개행)이 동작하지 않는다.

원인

웹에서 보여줄 때 몇몇 문자들은 자동으로 인코딩이 하여서 보여주지 않는다.

해결 방법

div {
	white-space: pre-wrap;
}

위의 css를 해당 요소에 추가하거나

<TabPanel style={{ whiteSpace: "pre-wrap" }}>
	{item.data}
</TabPanel>

react의 JSX에서는 위와 같이 스타일을 추가한다.

참고 자료

• https://forum.freecodecamp.org/t/newline-in-react-string-solved/68484
• 공식문서: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
• 블로그: https://amkorousagi-money.tistory.com/entry/html-%EB%98%90%EB%8A%94-react%EC%97%90%EC%84%9C-r-%EB%98%90%EB%8A%94-n-%EC%9C%BC%EB%A1%9C-%EC%A4%84%EB%B0%94%EA%BF%88%EA%B0%9C%ED%96%89%EC%9D%B4-%EC%95%88%EB%90%A8