리액트 엔터값 변환 처리 방법

 

 

리액트(React)에서 엔터(\n) 값을 변환하는 방법은 여러 가지가 있습니다.
주로 줄바꿈 처리를 할 때 사용되며, HTML에서 <br /> 태그로 변환하는 방식이 일반적입니다.

---

1️⃣ replace()를 사용해 <br /> 태그로 변환

문자열의 \n을 <br /> 태그로 변환하여 JSX에서 렌더링합니다.

jsx

복사편집

const TextWithLineBreaks = ({ text }) => { return <p dangerouslySetInnerHTML={{ __html: text.replace(/\n/g, "<br />") }} />; };

📌 주의: dangerouslySetInnerHTML을 사용할 경우 XSS(보안) 문제에 주의해야 합니다.

---

2️⃣ split("\n")을 사용하여 줄바꿈 처리

split("\n")을 사용하여 배열로 나눈 후, <br />을 삽입하는 방식입니다.

jsx

복사편집

const TextWithLineBreaks = ({ text }) => { return ( <p> {text.split("\n").map((line, index) => ( <React.Fragment key={index}> {line} <br /> </React.Fragment> ))} </p> ); };

✅ 장점: 보안에 안전하며, HTML을 직접 삽입하지 않습니다.
✅ 단점: <br />이 여러 개 연속으로 들어가면 빈 줄이 생길 수 있습니다.

---

3️⃣ CSS를 활용해 자동 줄바꿈 적용

줄바꿈이 포함된 문자열을 white-space: pre-line; 스타일을 사용하여 자동으로 줄바꿈합니다.

jsx

복사편집

const TextWithLineBreaks = ({ text }) => { return <p style={{ whiteSpace: "pre-line" }}>{text}</p>; };

✅ 장점: 별도의 변환 없이 CSS로 해결 가능
✅ 단점: <br /> 태그를 직접 추가하지 않음

---

✅ 정리

방법장점단점

replace(/\n/g, "<br />")	간단한 변환	보안(XSS) 문제 가능
split("\n").map(...)	안전하고 가독성 좋음	코드가 길어질 수 있음
white-space: pre-line;	가장 간단한 방법	<br />을 직접 삽입하지 않음

👉 추천 방법:

• HTML 렌더링이 필요하면 replace() 사용 (XSS 조심)
• React 컴포넌트라면 split("\n").map(...) 방식 추천
• CSS로 해결할 수 있다면 white-space: pre-line; 활용

⚡ 사용하는 상황에 맞게 적절한 방법을 선택하세요! 🚀

 

 

 

출처:챗GPT 

 

이놈 참... 똘똘하네