react html parsing

zerozoo-front·2021년 4월 13일
0

react with webpack 5

목록 보기
2/37

react에서 html을 parsing것에 대해

TOC

  1. react가 말하는 html parse
  2. html parsing 방법

1. react가 말하는 html parse


react는 기본적으로 html parsing을 권장하지 않는다.

-출처: react.js

react에서 innerHTML을 사용하려고 하면 에러가 발생하는데 기본적으로
react에서 제공하는 위의 함수를 사용해야 html parse가 가능하다.

함수의 이름이 dangerouslySetinnerHTML인 것은 실제로 보안에 취약하기 때문이다.





2.html parsing 방법


react에서 권장하지 않는다고 해서 무작정 사용하지 않을수는 없다.

npm에서 적절한 방법을 찾아보자.
e.g.

  1. https://www.npmjs.com/package/html-react-parser
  2. https://www.npmjs.com/package/dompurify
npm은 기본적으로 다운로드 수가 많은 편이 안전하고 사용하기 편하다.

나는 dompurify를 선택했다.

import DOMPurify from "dompurify";
		...
        <SecondSectionStyle
          dangerouslySetInnerHTML={{
            __html: DOMPurify.sanitize(contents),
          }}></SecondSectionStyle
          
          	...

dompurify는 react에서 제공하는 dangerouslySetInnerHTML의 인자로 전달되는 item을 감싸는 형태로 사용된다.

conclusion

예의 보안성을 높인 모듈로 html을 parsing 할 일이 생긴다면 참고해보자.

profile
이 블로그의 글은 제 생각을 정리한 글과 인터넷 어딘가에서 배운 것을 정리한 글입니다. 출처는 되도록 남기도록 하겠습니다. 수정 및 건의 오류 등이 있으면 언제든지 댓글 부탁드립니다.

0개의 댓글