[React] 문자열 그대로 렌더링, XSS , dangerouslySetInnerHTML

 React는 기본적으로 XSS(교차 사이트 스크립팅) 공격 방지를 위해 html 문자열을 자동으로 이스케이프한다.

즉, <p>안녕하세요</p> 라는 문자열은 그대로 &lt;p&gt;안녕하세요&lt;/p&gt;로 렌더링됩니다.

 

하지만 때로는 서버나 외부 데이터에서 가져온 html 문자열을 태그로서 실제 반영하고 싶을 때가 있다.

이럴 떄 사용하는 것이 바로  dangerouslySetInnerHTML이다.

 

하지만 문법의 네이밍 그대로 이 방식은 XSS 공격에 취약할 수 있기에 rEACT는 일부러 위험함을 강조하기 위해

dangerouslySetInnerHTML 이라는 이름을 붙였다.