React 에서 innerHTML 사용하기

반응형

리액트에서 HTML코드를 동적으로 추가하기 위해서는 기존에 자바스크립트에서 사용하던 방식과 약간 다릅니다.
기존의 자바스크립트에서는 innerHTML를 사용해서 넣어준다면 정상적으로 동작했지만, 리액트에서 아래와 같이 추가를할 경우 원하는 결과가 나오지 않습니다.

import React from "react";

export default () => {
  const htmlCode = "<div><button>버튼 </button></div>";
  return <div>{htmlCode}</div>;
};

 

React에서 텍스트로 된 HTML코드를 추가하고 싶은 경우에는 React에서 정해진 규칙을 사용해야합니다.
React에는 dangerouslySetInnerHTML={{ __html: htmlCode }} 과 같은 형태로 주가해주어야 합니다.

import React, { useEffect } from "react";

export default () => {
  const htmlCode = "<div><button>버튼 </button></div>";
  return <div dangerouslySetInnerHTML={{ __html: htmlCode }}></div>;
};

그러면 위와 같이 React에도 Html 코드를 추가할 수 있게 됩니다.