[React] 동적으로 HTML 코드 추가하기

 

html 태그를 유동적으로 사용하기 위해서 기존 JavaScript에서는 innerHTML을 사용하여 바꿔주었지만,

React에서는 해당 방법을 사용하는 것은 엄청나게 비효율적입니다.

 

텍스트로 구성된 HTML 태그를 추가하기 위해서는 React에서 정한 특정 규칙을 사용해야 합니다.

코드

React에서 dangerouslySetInnerHTML={{ __html: Code }} 와 같은 형식으로 사용하면 됩니다.

 

javascript
const html = "<p>가나다라</p>";

const Main = () => {
  return (
    <div dangerouslySetInnerHTML={{ __html: html }} ></div>
  );
}

export default Main;