dangerouslySetInnerHTML

김태현·2021년 1월 1일
0

리액트

목록 보기
4/11

타입스크립트로 리액트 퀴즈 만드는 영상을 보는데

dangerouslySetInnerHTML?

dangerouslySetInnerHTML??

dangerouslySetInnerHTML???

이상한게 나와서 찾아봤습니다

리액트 공식문서를 보면 dangerouslySetInnerHTML은 리액트 만의 브라우저 DOM에서 innerHTML을 사용하기 위한 대체방법이라고 합니다
리액트 에서는 XSS(cross-site-scriptin) 공격 (게시판이나 메일 같은곳에 자바 스크립트 같은 스크립트 코드를 악의적으로 삽입하는 취약점 공격 방법의 일종)을 막기위해 일반적으로 html태그가 담겨있는 string을 렌더링 하면 그 태그를 동작시키지 않고 문자열 그대로 렌더링 되게 합니다

이렇게요

하지만 이러한 리액트의 경고를 무시하고 그냥 실행시키는 방법이 있었으니 그게 바로 dangerouslySetInnerHTML 입니다


(b 태그가 먹어서 볼드가 된것을 알수가 있죠)

dangerouslySetInnerHTML을 사용할때는 주의해야 할 점이 있는데 바로 반드시 __html이라는 키로 값을 전달해야 한다는 점 입니다

profile
프론트엔드 개발자

0개의 댓글