외곈 World 👽🌏

🎈 dangerouslySetInnerHTML

dangerouslySetInnerHTML은 React에서 HTML을 직접적으로 DOM에 삽입할 때 사용하는 속성이다. 이 이름에 dangerously라는 단어가 들어간 이유는 HTML을 직접 조작할 때 보안 위험이 있을 수 있음을 강조하기 위해서다.

사용법

dangerouslySetInnerHTML은 객체를 속성 값으로 받고, 이 객체는 __html 키를 포함해야 한다. 이 키의 값으로는 HTML 문자열이 들어간다. 외부에서 가져온 HTML을 삽입할 때 주로 사용되는데, React는 기본적으로 직접적인 HTML 삽입을 방지해서 XSS 공격을 막으려고 하기 때문에, 이를 우회하기 위해 사용된다.

function MyComponent() {
  return <div dangerouslySetInnerHTML={{ __html: '<strong>안녕하세요</strong>' }} />;
}

장점

• 직접적인 HTML 삽입: 기존 HTML 문자열을 DOM에 바로 삽입할 수 있어서, 서버나 외부에서 가져온 마크업을 그대로 렌더링할 때 유용하다.
• 유연성: 특정 라이브러리나 도구에서 생성된 HTML을 React 컴포넌트와 통합할 수 있다.

단점

• 보안 위험: XSS 공격에 취약하다. 외부에서 가져온 데이터가 검증되지 않으면 악의적인 스크립트가 포함될 수 있다.
• SEO 최적화: 정적인 페이지 생성에는 적합하지 않다. 크롤러가 JavaScript를 실행하기 전에 페이지의 내용을 인식하지 못할 수도 있다.
• 성능 문제: React의 가상 DOM과의 동기화 문제로 인해 성능이 저하될 수 있다.

대체 방법

• React 컴포넌트 사용: HTML을 React 컴포넌트로 변환해서 사용한다. 이 방법은 XSS 공격의 위험을 줄이고, React의 성능 최적화를 유지할 수 있다.
• DOMPurify와 같은 라이브러리 사용: 외부 HTML을 삽입하기 전에 클린업하고 안전하게 만든다. 이 방법은 위험한 태그와 속성을 제거하여 안전한 HTML만 삽입되도록 한다.
• Markdown 라이브러리 사용: 사용자가 입력한 Markdown 텍스트를 안전하게 HTML로 변환할 수 있다. 이 방법은 블로그 게시물이나 코멘트 시스템에 유용하다.

dangerouslySetInnerHTML을 사용할 때는 보안을 특히 주의해야 하고, 가능하면 안전한 대체 방법을 사용하는 편이 좋다.