[react] 데이터(json) html 태그 화면 렌더링 방법 (ft. html-react-parser)

[react] 데이터(json) html 태그 화면 렌더링 방법 (ft. html-react-parser)

 

api 호출로 data 출력할때 

html를 넣어 바로 렌더링 시킬때

사용법 입니다.

 

• html-react-parser 라이브러리를 사용할 수 있습니다.
• 라이브러리를 이용해 html를 react의 문법인 jsx 로 변환합니다.
• HTML to React parser that works on both the server (Node.js) and the client (browser) - 공식문서

 

html-react-parser 설치

npm install html-react-parser --save
또는
yarn add html-react-parser

 

html-react-parser 사용법

import Parser from 'html-react-parser'; //1. import 삽입
...
return (<div>{Parser(title)}</div>) //2. html 코드

 

html-react-parser 라이브러리 공식문서를 아래를 참조해주세요.

https://www.npmjs.com/package/html-react-parser

html-react-parser

 

HTML to React parser that works on both the server (Node.js) and the client (browser):