[React] html 텍스트를 나타내는 dangerouslySetInnerHTML

<p>안녕</p>와 같이 HTML 텍스트를 그대로 렌더링 하기 위해선 dangerouslySetInnerHTML를 사용할 수 있다.

 

dangerouslySetInnerHTML란?

HTML 텍스트를 동적으로 렌더링할 수 있는 리액트의 속성이다.

리액트 컴포넌트에 직접적으로 HTML 코드를 삽입할 수 있다.

__html이라는 key를 가지고 있으며, 이를 통해 렌더링 할 HTML 코드를 문자열 형식으로 전달한다.

 

사용법

import React from 'react';

function Component(){
    const markup = { __html: "contains <strong>HTML!!</strong>" };

    return <div dangerouslySetInnerHTML={markup} />;
}

 

주의점

이름에서도 dangerous라고 나타나듯이, 위험하게 설정된 HTML을 뜻한다.

XSS(Cross-site Scripting) 공격에 취약하다. HTML 코드를 그대로 나타내기 때문에 안전한 데이터만 다뤄야 한다. 예를 들어 사용자가 입력한 내용을 렌더링하려고 할 때, 사용자가 악성 스크립트를 삽입할 수 있다.

 

따라서 신뢰할 수 있는 데이터로만 사용해야 한다.

 

데이터 유효성 검사하기

데이터의 안전성 검증을 위한 다양한 방법이 있겠지만,

그중에서 DOMPurify이라는 HTML 필터링 라이브러리를 통해 안전한 HTML 코드만 허용하도록 할 수 있다.

 

아래에 함께 사용한 코드를 작성했다.

 

import React from 'react';
import DOMPurify from 'dompurify';

function Component(){
    const string = "contains <strong>HTML!!</strong>";
    const sanitizedString = DOMPurify.sanitize(string);

    return <div dangerouslySetInnerHTML={{ __html: sanitizedString }} />;
}

 

innerHTML와의 차이

리액트의 가상 DOM이 아닌 직접적으로 DOM을 조작하기 때문에, 성능 저하가 발생할 수 있다.

해당 내용이 변경되었을 때 바로 동적으로 렌더링 되지 않는다.

 

 

https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html

Common components (e.g. <div>) – React