[React] 텍스트 줄 바꿈 / 데이터 불러 올 때 줄 바꿈

api를 이용해서 데이터를 불러오는 도중

description 데이터가 줄바꿈이 되지 않고 불러와지는 현상을 겪게 되었다.

console로 데이터를 확인하면 줄바꿈이 되어있는데 왜 안될까 알아보던 중

react.js에서는 \n을 처리를 안해주는 것으로 확인되었다.

 

어떻게 처리하면 좋을까?

 

const textTransformation = (text) => {
    return text.split("\n").map((line) => (
      <>
        {line}
        <br />
      </>
    ));
  };

처음에는 위와 같이 text에 "\n"을 기준으로 배열로 나누어서

<br />과 함께 출력을 했는데 너무 비효율 적인것 같아서 찾아보던 중

 

 

css기능 중에 줄바꿈 기능이 있다!

white-spase: pre-wrap;

\n을 인식하여 줄바꿈 처리를 해준다.