React에서 안전하게 HTML 렌더링하기: dangerouslySetInnerHTML의 대안
·
React
React에서 HTML 문자열을 렌더링해야 하는 경우가 있습니다. 이런 상황에서 dangerouslySetInnerHTML을 사용하게 되는데, 이는 보안과 성능 측면에서 여러 문제를 일으킬 수 있습니다. HTML 아무 제약 없이 그대로 출력된다는 건 XSS 공격의 위험이 있고, 사용자 입력값이 직접 DOM에 주입될 수 있어 위험합니다.또한 React의 Virtual DOM 을 우회하게 되어, 최적화되지 않고 불필요한 리렌더링을 통해 성능 저하의 원인이 될 수 있습니다 대안 : html-react-parse + DOMPurify npm install html-react-parser dompurify @types/dompurify dangerouslySetInnerHTML을 대신하기 위해 위 두 가지 라이브..