dangerouslySetInnerHTML

dangerouslySetInnerHTML

브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법.

 

일반적으로 코드에서 HTML을 설정하는 것은 "사이트 간 스크립팅 공격" 에 쉽게 노출될 수 있기 때문에 위험.

따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 "dangerouslySetInnerHTML"을 작성하고 " __html " 키로 객체 전달.

 

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

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

function MyComponent() {
  return <div dangerouslySetInnerHTML={{ __html : (전달받을 props(?)) }} />;
}

 

---

참고사이트

 

https://okayoon.tistory.com/entry/React-DOM%EC%97%98%EB%A6%AC%EB%A8%BC%ED%8A%B8%EC%97%90-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%82%BD%EC%9E%85%ED%95%98%EA%B8%B0-innerHTML%EB%A7%90%EA%B3%A0-dangerouslySetInnerHTML%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%9E%90

React. DOM엘리먼트에 텍스트 삽입하기 innerHTML말고 dangerouslySetInnerHTML를 사용하자

https://darrengwon.tistory.com/677

dangerouslySetInnerHTML : 문자열로 출력되는 html을 렌더링하기