개행 '\n'을 포함하여 하나의 긴 문자열 랜더링하기

같은 컴포넌트에 텍스트만 바꿔서 재사용하여 페이지 하나를 만들고 있었는데 props로 텍스트를 넘겨줄 때

긴 문자열을 하나의 변수로 넘겨주어 렌더링 하면 \n을 표시했음에도 불구하고 브라우저상에서는 개행이 포함되지 않는 문제가 있었습니다. 

단순히 여러 변수로 나누어 전달하는 방법도 있지만 이는 나중에 컴포넌트 재사용 측면에서

매우 비효율적일거라 생각해서 구글링을 했습니다.

놀랍게도 아주 여러 실험을 통해 답을 찾아낸 분이 계신 덕분에 쉽게 해결할 수 있었습니다.

참고한 블로그 링크 입니다. 

Lab | React, 장문의 Text의 개행이 가능할까?

---

개행 '\n'을 포함하여 하나의 긴 문자열 랜더링하기

---

 

const text = "아주아주 긴 문자열을 전달한다고 가정해봅시다.\n이걸 컴포넌트 호출시 props로 전달받은 거죠!"

{text.split('\n').map((line) => {return <div>{line}<br></br></div>})}

prop로 전달 받은 텍스트가 개행이 필요할 정도로 아주 긴 문자열이라 가정했을 때, 

위와 같은 코드에서 text 문자열은 \n을 기준으로 나눠져 각각 line이라는 변수로 mapping 되어 <br>을 포함한 <div>로 반환되어 

개행을 포함한 상태로 브라우저에 표시됩니다.

 

 

구글링 최고! 도움 받은 블로그 최고!

감사합니다 :)