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

남양주개발자

·

2023. 1. 13. 21:07

728x90
반응형

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

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

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

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

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

white-space: pre-line;
const str = "안녕하세요.\n 여기는 대한민국입니다.";
// 안녕하세요. 
// 여기는 대한민국입니다.
728x90
반응형
그리드형

💖 저자에게 암호화폐로 후원하기 💖

아이콘을 클릭하면 지갑 주소가자동으로 복사됩니다

0개의 댓글