dangerouslySetInnerHTML

React에서 DOM을 조작할 때, innerHtml 대신 권장하는 방법이다.
그 이유는 사이트 간 스크립팅 공격에 쉽게 노출 될 수 있기 때문이라고 한다.

위험하다는 것을 상기시키기 위해 dangerous가 들어간다고 한다.
뭔가 세심한 배려가... 들어간것 같다.
dangerouslySetInnerHTML을 사용하면, React는 해당 특정 요소의 콘텐츠가 동적임을 알고 해당 노드의 자식에 대해 추가 성능을 얻기 위해 가상 DOM과의 비교를 건너뛴다.
따라서 dangerouslySetInnerHTML을 사용하여 가상 DOM과 실제 DOM을 비교하여 변경된 것이 있다면 리렌더링이 가능하다.

사용법은 __html 키로 객체를 전달하면 된다.
React 공식 문서에는 함수 안에 객체로 전달하고 있는데 이렇게 사용해도 되고,

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

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

이렇게 바로 객체로 입력 해도 된다.

function MyComponent() {
  return <div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />;
}

DOM엘리먼트-공식문서
한글 문서
영문 문서

sanitize-html

dangerouslySetInnerHTML를 이용할때, script가 포함되어 있으면,이를 악용하는 경우가 있다.
이런 잠재적인 위험을 안전하고 깨끗하게 출력하도록 하는 도구 중 하나가 DOMPurify 이다.
다만, DOMPurify에는 DOM 트리가 필요하고 Node 환경에는 DOM 트리가 없기 때문에 패키지 jsdom를 사용하여 window객체를 생성하고 초기화 DOMPurify하거나 패키지를 단독으로 사용해야 한다.

위 방법으로 시도 해 보았는데, 에러가 계속 나서 몇일간 삽질만 하다가(webpack 문제인것 같다.)찾은 다른 해결 방법이 sanitize-html 였다.
sanitize-html은 다양한 옵션이 존재 하기때문에 사용하기 편리하여 사용하게 됐다.

<div
	dangerouslySetInnerHTML={{
		__html: sanitizeHtml('<h1>hi~</h1>', {
		allowedTags: false,
		allowedAttributes: false,
		}),
	}}
/>

옵션을 설정하는 방법도 간단하고, 설명서에 이해하기 쉽게 정리가 아주 잘 되어 있다.
sanitize-html 사용법