React - String형태의 html 렌더링하기

리액트 공식문서에 따르면 dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 리액트의 대체 방법이라고 한다. 일반적으로 코드에서 HTML을 설정하는 것은 cross-site scripting(XSS) 공격에 쉽게 노출될 수 있기 때문에 위험하다고 한다. 그래서 XSS공격을 막기 위해, 렌더링 메서드 내부에서 html 태그가 담겨있는 문자열 형태를 렌더링 하면, 태그가 먹히지 않고 문자열 그대로 렌더링되게 된다. 따라서 리액트에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML을 작성하고 반드시 __html 키로 객체를 전달해야 한다.

만약 저 문자열에 태그가 적용된 상태로 렌더링이 된다면, 사용자가 임의로 웹페이지에 스크립트를 먹일수도 있어서 취약점이 생기게 된다. 리액트에선 이 취약점을 원천차단 하기 위해 무조건 텍스트 형태로만 렌더링하게 설정되었다.

그래서 취약점을 무시하고 사용하기 위해 dangerouslySetInnerHTML을 쓰는 것이다. 이름부터 dangerous라니.. 위험하니 쓰지말라는 표시인 것 같다. 사용법은 아래와 같다.

적혀있듯이 해당 어트리뷰트에 키로 __html을 주고 태그를 입력하면 된다.