리액트에서 dangerouslySetInnerHTML 렌더링하기

dangerouslySetInnerHTML는 React에서 제공하는 속성입니다.

이것을 사용하면 JavaScript를 통해 직접 HTML을 DOM에 삽입할 수 있습니다.

이것은 문자 그대로 "위험하게" DOM에 직접 HTML을 삽입하기 때문에, 이 이름이 붙여진 것입니다.

XSS(크로스 사이트 스크립팅) 같은 보안 문제에 쉽게 노출될 수 있기 때문에 사용할 때 주의가 필요합니다.

사용 방법

function MyComponent(props) {
  return (
    <div dangerouslySetInnerHTML={{ __html: props.htmlString }} />
  );
}

function App() {
  const htmlString = "<p style='color: red;'>This is a dangerous example!</p>";

  return (
    <div className="App">
      <MyComponent htmlString={htmlString} />
    </div>
  );
}

expor

 

활용 방법 1 : svg 코드 렌더링

외부에서 가져온 SVG 코드나 복잡한 SVG 문자열을 렌더링할 때 유용하다.

import React from 'react';

function SvgComponent({ svgString }) {
  return (
    <div
      dangerouslySetInnerHTML={{ __html: svgString }}
    />
  );
}

function App() {
  const svgString = `
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill="red" />
    </svg>
  `;

  return (
    <div className="App">
      <h1>Rendering SVG using dangerouslySetInnerHTML</h1>
      <SvgComponent svgString={svgString} />
    </div>
  );
}

export default App;