[React] dangerouslySetInnerHTML 사용하여 문자열 html 출력하기

태그와 문자열이 함께 저장되어있는 JSON 데이터를 받아와 화면에 출력하려고 했다.

HTML 태그와 문자열을 포함하는 json 데이터

컴포넌트에 json 데이터 출력

json 데이터 출력 결과

우리가 상상하는것과 다르게 태그가 문자열 그대로 출력된다.

React 공식 문서에 따르면 일반적인 코드에 HTML 코드를 삽입하는것은 Cross-Site Scripting(XSS)에 취약하다고 한다.

사용자가 임의로 웹페이지에 스크립트를 적용할 수 있어 이러한 문제점을 차단하기위해 무조건 텍스트로만 출력되게 설정되어있다고 한다.

그래서 우리가 상상하던데로 출력되지않고 문자열 그대로 태그가 출력 되는것이었다.

React 공식 문서에 따르면 DOM에 innerHTML을 사용하려면 즉, 태그를 포함한 문자열 데이터를 태그가 적용되어 출력되게 하기위해서는 대체 방법인 dangerouslySetInnerHTML을 사용하라고 나와있다.

dangerouslySetInnerHTML 속성명을 보면 알 수 있듯이 개발자에게 위험하다는것을 한번더 상기시키기 위해서 dangerously라는 단어가 포함되어있는 dangerouslySetInnerHTML을 사용해서 출력하게 한다는것이다.

사진과 같이 __html을 객체의 키로 전달하고 value값으로 태그가 포함된 문자열 데이터를 전달하면 우리가 상상하던것과 같이 출력된다.

dangerouslySetInnerHTML 출력 결과