lottie
Seungjun's blog
blog
리액트에서 html 마크업으로 데이터를 응답받은 경우 그대로 html으로 적용하는 방법

React에서 클라이언트에서 HTML 마크업 데이터를 응답받아 이를 그대로 적용하려면 dangerouslySetInnerHTML prop을 사용할 수 있습니다. dangerouslySetInnerHTML prop을 사용하여 마크업 데이터를 적용하려면 다음과 같이 작성할 수 있습니다:

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

이 코드에서 htmlData prop에 클라이언트에서 응답받은 HTML 마크업 데이터가 전달됩니다. 이 데이터는 dangerouslySetInnerHTML prop을 사용하여 그대로 적용되어, 해당 컴포넌트가 렌더링될 때 HTML 마크업으로 출력됩니다.


dangerouslySetInnerHTML prop은 이름에서 알 수 있듯이, 조심해서 사용해야 합니다. 이 prop은 입력된 HTML을 신뢰하지 않는 경우 XSS(Cross-site scripting) 공격에 취약할 수 있습니다. 따라서 dangerouslySetInnerHTML prop을 사용할 때는 신뢰할 수 있는 데이터에만 사용하는 것이 좋습니다.

dangerouslySetInnerHTML prop은 React에서 제공하는 기능입니다.


이 prop은 React에서 HTML을 렌더링할 때 사용하는 Virtual DOM(Virtual Document Object Model)을 우회하여, 직접적으로 HTML을 삽입하는 기능입니다. 따라서 **dangerouslySetInnerHTML prop은 React 내장 기능이며, JavaScript의 내장 기능이 아닙니다.**


React는 dangerouslySetInnerHTML prop을 사용하여 HTML을 렌더링할 때, HTML을 안전하게 렌더링하기 위해 몇 가지 보안 검사를 수행합니다. React는 이 prop을 사용하여 HTML 마크업을 삽입할 때, 기본적으로 script 태그와 같은 보안 상 위험한 태그를 제거합니다. 또한, HTML 마크업을 삽입할 때, Cross-site scripting(XSS) 공격에 대비하여 이스케이프(Escape) 기능도 제공합니다.


따라서, dangerouslySetInnerHTML prop을 사용할 때는 HTML 마크업을 신뢰할 수 있는 데이터에만 사용하고, 보안상의 이유로 신뢰하지 않는 데이터를 사용하지 않도록 주의해야 합니다.


이밖에도 htmlParser와 같은 외부라이브러리를 사용하는 방법도 있습니다.