리액트 DOM 앨리먼트 innerHTML, dangerouslySetInnerHTML

 

 

리액트에서의 DOM 앨리먼트는 기존의  DOM 앨리먼트와 조금씩 차이점이 있다.!

 

리액트에서는 카멜케이스로 변경되는 부분이 많지만

 

innerHTML은 아예 다른 이름으로 사용하여 이 부분만 작성해보려한다!

 

---

dangerouslySetInnerHTML 

dangerouslySetInnerHTML 은 브라우저 DOM에서  innerHTML 을 사용하기 위한 React의 대체 방법입니다.
일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험합니다  따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 
dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야 합니다

 

코드로 확인해보자면

 

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

 

 

{__html: "출력할 HTML코드 "} 

 

 

ko.reactjs.org/docs/dom-elements.html

DOM 엘리먼트 – React