줄바꿈 설정이 필요한 이유

 const str= "a \n between b";
 const str1= "a <br/> between b";

jsx에 의해서 개행문자나 태그는 동작하지 않고 그대로 출력한다.

 a \n between b
 a <br/> between b

해결 방법

CSS 상에서 밑의 코드를 선언해주면 된다.

white-space: pre-line

그러면 리액트에서 이제 \n을 인식하여 줄바꿈이 일어난다!!!

a
between b

Reference

https://developer.mozilla.org/ko/docs/Web/CSS/white-space