React 렌더링 innerHTML 사용하기

dangerouslySetInnerHTML

dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다. 일반적으로 코드에서 HTML을 설정하는 것은사이트 간 스크립팅공격에 쉽게 노출될 수 있기 때문에 위험합니다. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해dangerouslySetInnerHTML을 작성하고__html키로 객체를 전달해야 합니다. 아래는 예시입니다.

 

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

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

출처: https://ko.reactjs.org/docs/dom-elements.html

 

정리

react 렌더링시 html 특수문자 값 표현

return <div dangerouslySetInnerHTML={__html: '&lt;안녕&gt;'} />;

 

결과:   <안녕>