[React] React에 html 태그 집어넣기 (dangerouslySetInnerHTML)

React에서 DOM에 innerHTML을 사용하기 위한 방식입니다.

HTML태그와 내용을 넣을 수 있는데 이러한 경우에는 XSS(크로스 사이트 스크립팅) 공격에 쉽게 노출될 수 있습니다.

이러한 보안 문제때문에 React에서는 JSX에 html 태그를 그대로 넣으면 브라우저에 html 태그가 그대로 출력됩니다.

  

const App = () => {
    const getHtml = () => {
        return '<div>Hello!</div>';
    }
    return (
    	<main>{getHtml()}</main>
    )
}
export default App;

HTML 태그를 JSX안에서 DOM에 삽입하기 위해서는 html 태그에 dangerouslySetInnerHTML 속성을 이용합니다.

dangerouslySetInnerHTML속에는 객체를 넣어야 하고 객체의 key는 __html 이어야 합니다.

const App = () => {
    const getHtml = () => {
        return '<div>Hello!</div>';
    }
    return (
    	<main dangerouslySetInnerHTML={{__html:getHtml()}} />
    )
}
export default App;