dangerouslySetInnerHTML

프로젝트 1차 기획을 배포하기전에 이용약관과 개인정보방침에 대한 생각을 준비하고 있었는데 사이트에서 가이드를 보면서 만들어 코드에 적용시키려고 보니 html 파일이어서 이를 react에 어떻게 적용시킬게 고민하던 중 찾게 된 방법이 dangerouslySetInnerHTML이다.

dangerouslySetInnerHTML

브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법이다.
일반적인 HTML 코드로 설정하는 것은 사이트 간 스크립트 공격에 쉽게 노출될 수 있기 때문이다.

위험하다는 것을 상기시켜주기 위해 dangerouslySetInnerHTML을 작성하고
하고 __html 키로 객체를 전달한다.

동작은 동일하게 HTML을 삽입한다.

1. innerHTML을 사용하면 DOM노드가 수정되었을때 수정된 것을 알수 있는 방법이 없다고 한다.
2. 그러나 dangerouslySetInnerHTML을 사용하면, 콘텐츠가 동적임을 알고 해당 노드의 자식에 대해 추가 성능을 얻기 위해 가상 DOM과 실제 DOM을 비교하여변경 된 것이 었다면 리렌더링이 될 수 있도록 해야한다.

참조
https://ko.reactjs.org/docs/dom-elements.html
https://velog.io/@coco1606/dangerouslySetInnerHTML