리액트에선 문자열 내의 \n을 HTML에서의 줄바꿈으로 자동으로 변환하지 않음

그러므로 <br>태그로 변환해야 함

문제의 api 응답

"explainDetail": "\n\n[1레벨] : 장비레벨+4\n비용 800 coin\n공격력 : +83\n\n[2레벨] : 장비레벨+4\n비용 1200 coin\n공격력 : +83\n용창 21식 돌격창(R) 인간추가공격력 : +5%\n\n[3레벨] : 장비레벨+4\n비용 1600 coin\n공격력 : +83\n용창 21식 돌격창(R) 인간추가공격력 : +5%\n\n한 번쯤은 오시지 않을까, 손꼽아 기다렸습니다. 정말 꿈만 같습니다. -자네트-"

리액트는 \n을 줄바꿈해주지 않는다.
그러므로 해당 데이터를 그대로 출력할 경우 줄바꿈이 되지 않는다.

해결법:

const enterExplainDetail = detailItemingData?.explainDetail
    .split("\n")
    .map((line, index) => (
      <React.Fragment key={index}>
        {line}
        <br />
      </React.Fragment>
    ));

이렇게 \n을 <br />태그로 변환했다.