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

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

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

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

이럴때 사용하는 함수가 dangerouslySetInnerHTML={?{__html:?}?} 함수입니다.

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

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

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments