TIL(React)

✅ dangerouslySetInnerHTML

dangerouslySetInnerHTML은 React에서 컴포넌트의 inner HTML을 설정하는 데 사용되는 prop

• "dangerouslySetInnerHTML"은 사용자 입력에서 직접 inner HTML을 설정하는 것이 잠재적으로 안전하지 않을 수 있으며, 이는 Cross-Site Scripting (XSS) 공격을 일으킬 수 있기 때문이다.

제 3 자 라이브러리나 API와 통합할 때와 같이 동적으로 HTML 마크업을 렌더링해야하는 경우.
dangerouslySetInnerHTML을 사용하여 컴포넌트의 inner HTML을 설정할 수 있다.

사용 예시

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

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