[React] string 값을 html 로 렌더링 하여 불러오는 방법

Engineering 2021년 2월 27일

리엑트에서 html 태그가 있는 글을 출력하면 아래와 같이 나옵니다.

태그가 읽히지 않고 그냥 출력된 모습

리엑트에서는 XSS 공격을 사전에 방지하기 위해 HTML 태그 , JS 문법은 모두 escape 시키기 때문에 html 태그가 읽히지 않습니다.
그러나 DB 나 다른 파일에서 HTML 문서 또는 내용을 불러와야 될때가 있습니다.
이럴때 사용하는 함수가 dangerouslySetInnerHTML={?{__html:?}?} 함수입니다.

이 문법을 적용하고 기존에 있던 코드를 삭제하였습니다.  그리고 dangerouslySetInnerHTML={?{__html: this.state.des?}?}  로 변경하였습니다.

위와 같이 정상적으로 HTML 태그를 불러온 모습입니다!

태그