\n 텍스트 줄 바꾸기

프로젝트를 하는 도중 백엔드쪽에서 긴텍스트를 한번에 보내주는 컴포넌트가 있었는데, "\n" 이 표시된 부분마다 짤라서 넣어주는 식을 생각해보게 되었다.

{productInfo.info}

우선은 replace 메서드를 이용해서 \n를 br
으로 바꾸는건 어떨까라는 생각을 해보았다.

{productInfo.info.replace("\n", " <br/> ")}

이런식으로
이 그냥 출력이 되어 버렸다.

split을 사용해야겠다는 생각은 했는데... 정확히 파악을 못하고 있는 중에 동기분께서 split을 사용한뒤 map을 돌려서 li 태그 안에 넣어 주는걸 말해주셨다.

{productInfo.info.split("\n").map((x, index) => (
     <li key={index}>{x}</li>
  ))}

map을 돌려서 그안에 li tag를 넣어 나누어 주는 방법을 왜 생각해내지 못했을까...map...더 공부가 필요하다...