[React.js] React에서 문자열에 html 태그 적용하기

React란?

[Node.js] React.js 란? / React 사용법 ( create-react-app )

 

배경 설명

React는 문자열에서 html 태그를 사용하지 못하도록 보안처리가 되어있다.
( 사용자가 입력란에 html 태그를 사용해 조종하지 못하도록 하는 것 )

문자열에 html 태그를 사용하고 싶을 때는, 컴포넌트의 dangerouslySetInnerHTML 요소를 사용한다.

 

dangerouslySetInnerHTML  사용하기

<Example 
  dangerouslySetInnerHTML={{
    __html: "<mark>안녕하세요</mark>",
  }}
/>

 

sanitizeHtml 라이브러리 사용해서, 특정 태그만 사용하도록 하기

 

sanitizeHtml 설치

npm i sanitize-html

// 타입스크립트 사용시 아래 라이브러리도 함께 설치

npm i @types/sanitize-html

 

sanitizeHtml 사용하기

const cleanedString = sanitizeHTML(
  "<mark>안녕하세요</mark>",
  {
    allowedTags: ["mark"]
  }
)
// 문자열 내부의 mark 태그를 제외한 모든 태그를 제거해준다.

<Example 
  dangerouslySetInnerHTML={{
    __html: cleanedString,
  }}
/>
// 필터링된 최종 문자열을 컴포넌트에 넣기