[React] dangerouslySetInnerHTML: DOM에서 innerHTML 사용하기

아래와  같이 태그가 포함된 문자열 배열을 HTML로 렌더링하면 <em>태그가 그대로 출력된다.

details: [
  "<em>Recoil</em> 사용하여 전역 상태 관리",
  "<em>AWS S3 Bucket</em>을 이용한 이미지 URL 생성 및 업로드",
  "<em>Vite</em> 기반 ESLint와 TypeScript를 적용한 개발 환경 구성"
]

 

이처럼 React는 기본적으로 HTML 태그를 포함한 문자열을 일반 텍스트로 처리한다.

따라서 <em> 같은 태그가 포함된 문자열을 그대로 전달하면 HTML로 해석되지 않고 단순한 텍스트로 렌더링된다.

이를 해결하기 위해 React에서 HTML로 렌더링하도록 명시적으로 지시하는 방법이 dangerouslySetInnerHTML이다.

 

__html: HTML 문자열을 지정하는 속성. 따라서 여기에 문자열을 넣어주면 된다.

{details.map((detail, index) => (
                <li dangerouslySetInnerHTML={{ __html: detail }} key={index}></li>
))}

 

하지만, dangerous라는 이름에서 알 수 있듯이 보안 취약점(XSS)에 노출될 가능성이 있다!

내 경우에는 내부적으로 관리되는 보안과 관련 없는 일반적인 데이터이고, 악의적인 스크립트가 삽입될 위험이 없으며, 사용자 입력을 처리하지 않는 정적인 데이터이기에 간단하게 처리하기 위해 사용하였다.

이와 같은 경우가 아니라면 사용에 주의가 필요하다.