리액트 DOM 안에 html 넣기 (dangerouslySetInnerHTML)

리액트에서 보안을 위해서 기본적으로 html 태그를 텍스트 형태로 출력해준다. 만약 리액트에서 html 코드를 DOM안에 출력하고 싶다면  innerHTML 대신 다음과 같이 dangerouslySetInnerHTML를 사용한다.

이때 출력하려는 html 코드는 __html 객체로 전달한다. (보안상 추천하는 방법은 아님. 가능하다면 가급적 다른 더 안전한 방식을 사용할 것.)

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

[출처] : 리액트 공식문서 ko.reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

DOM 엘리먼트 – React