react api로 받아온 html string 데이터 화면에 적용 하기

조민혜·2023년 2월 20일
0

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

profile
Currently diving deeper into React.js development.

0개의 댓글