VUE같은 경우에는 v-html로 손쉽게 사용 가능하지만 리엑트에서는 dangerouslySetInnerHTML를 사용한다.
사용방법 예시는 두가지 정도 ..
1. return 문내에 dangerouslySetInnerHTML 사용
[ __html ] key 값은 필수
return (
<>
<div dangerouslySetInnerHTML={{ __html: popupMessage }}></div>
</>
);
2. dangerouslySetInnerHTML 함수로 사용
const [popupMessage, setPopupMessage] = useState("");
function htmlData() {
return { __html: popupMessage };
}
return (
<>
<div dangerouslySetInnerHTML={htmlData()}></div>
</>
);
[ innerHTML 과 dangerouslySetInnerHTML 차이 ]
아래는 innerHTML과 dangerouslySetInnerHTML 차이에 대해 질문한 것인데 한번 정독해 보는것을 추천
https://stackoverflow.com/questions/37337289/react-js-set-innerhtml-vs-dangerouslysetinnerhtml