리액트에서 string 형태의 HTML CODE 랜더링 방법

React 에서는 cross-site scripting (xss) 공격을
막기 위해 렌더링 메소드 내부에서 html 태그가 담겨있는
string 형태를 랜더링하면 태그가 안먹히고 문자열 그대로
랜더링됨.

이 방법을 해결하는 방법

<div dangerouslySetInnerHTML={ {__html: content} }>
      </div>

이렇게 dangerouslySetInnerHTML 를 사용해주면 됨.

2. 하지만 간단하게 저렇게 br 정도만 해결해주려는데
   저렇게 해야할까? 더 간단한 방법이 있음.

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

split 로 잘라내서 배열로 만든 후, .map 을 리턴시켜서
해결가능.

textarea 로 간단하게 사용자의 구매평이라든가 이런 내용을 인풋받아서 db 에 저장 후 불러올때 2번을 많이 사용하게 될 것
같다.

1번의 경우는 주로 wysiwyg 에디터내용을 가져와 쓸때
유용할 듯.