📚 Reference

• 공식 문서 1

📜 Chapter

dompurify

‣

Props

• dangerouslySetInnerHTML

dangerouslySetInnerHTML

• dangerouslySetInnerHTML
• React(및 Next.js)에서 브라우저의 DOM에 직접 HTML을 삽입할 때 사용하는 속성이다.
• 일반적으로 React는 보안을 위해 모든 문자열을 렌더링하기 전에 이스케이프(Escape) 처리를 한다. 예를 들어, "<b>안녕</b>"이라는 문자열을 넣으면 화면에 두꺼운 글씨가 아닌 태그 그대로가 보인다. 하지만 외부에서 가져온 HTML 데이터를 그대로 렌더링해야 할 때 이 속성을 사용한다.

dangerously인 이유

• 이름이 "위험하게"로 시작하는 이유는 XSS(Cross-Site Scripting) 공격에 노출될 수 있기 때문이다.
• 만약 신뢰할 수 없는 사용자로부터 입력받은 HTML(예: <script>alert('해킹')</script>)을 이 속성으로 실행하면, 악성 스크립트가 그대로 실행될 수 있다.
• 따라서 React는 개발자에게 "이 코드가 위험하다는 것을 인지하고 사용하는가?"를 명시적으로 묻기 위해 이런 이름을 붙였다.

사용법

• 속성 값으로는 객체를 전달하며, 그 안에 __html이라는 키로 실제 HTML 문자열을 넣는다. (밑줄이 두 개(__)이다!)

function MyComponent() {
  const bio = "<strong>안녕하세요!</strong> 저는 프론트엔드 개발자입니다.";

  return (
    // <div>{bio}</div> 라고 쓰면 태그가 텍스트로 보이지만,
    // 아래처럼 쓰면 <strong> 태그가 적용되어 보입니다.
    <div dangerouslySetInnerHTML={{ __html: bio }} />
  );
}

사용하는 곳

• CMS(Content Management System)에서 작성된 에디터 본문을 렌더링할 때 (예: 네이버 블로그 포스트 내용)