React에서 텍스트 줄바꿈하는 간단한 방법 (\n 줄바꿈 처리)

React에서 텍스트 줄바꿈하는 간단한 방법 (\n 줄바꿈 처리)

종종 개행 문자('\n')가 포함된 문자열 데이터를 받아서 사용하는 경우가 있습니다. JSX에서 개행 문자를 받았을 때 줄바꿈 처리를 하는 방법은 간단합니다.

일반적으로 그대로 사용하면 JSX에 의해서 개행문자나 태그는 동작하지 않고 그대로 출력합니다.

const str = "안녕하세요.\n 여기는 대한민국입니다.";
// 안녕하세요. 여기는 대한민국입니다.

이때 간단하게 CSS white-space 속성을 활용하면 해결할 수 있습니다.

white-space: pre-line;

const str = "안녕하세요.\n 여기는 대한민국입니다.";
// 안녕하세요. 
// 여기는 대한민국입니다.