React 문자열 줄바꿈 처리

\n을 <br /> 태그로 바꾸면 되는 간단한 문제지만 React에서는 보안을 위해 문자열로 태그를 입력시 그냥 문자열로 인식하도록 되어있다. 두가지 방법으로 해결할 수 있다.

1

str.split("\n")
  .map((line) => {
  	return (
      <span>
      	{line}
      	<br />
      </span>
    );
})

2

white-space: pre-line;