반응형
Quill Editor를 사용했는데
입력한 내용을 출력하면 이와 같이 HTML 형식 그대로 나온다.
이를 해결하는 아주 좋은 라이브러리가 있다
https://www.npmjs.com/package/html-react-parser
react 최신 버전 또는 다른 라이브러리와의 충돌이 있을 수 있으니
꼭 해당 명령어로 진행 해주길 바란다.
npm install html-react-parser --save
Usage
Import ES module:
import parse from 'html-react-parser';
그리고 나서는 해당 HTML 데이터 값을
parse 함수에 넣어 주면
editor 에 맞는 뷰를 제공한다.
<ul>
{parse(`
<li>Item 1</li>
<li>Item 2</li>
`)}
</ul>
반응형
'Web Dev > react.js' 카테고리의 다른 글
React.js 파일 업로드 풀스택으로 구성하는 방법 여기서 확인하세요 ! (2) | 2023.10.12 |
---|---|
React 함수형 컴포넌트 생성 단축키 rafce , rfce + Extension (0) | 2023.10.12 |
useCallback()을 사용하는 것은 큰 의미가 없거나 오히려 손해인 경우도 있습니다 (0) | 2023.09.25 |
useOncCickOutside , useClickAway 실전에서 사용하기 (0) | 2023.08.08 |
React.js 네이버 클라우드 외부 저장소에 파일 저장하기 (0) | 2023.07.31 |
Warning: A component is changing an uncontrolled input to be controlled. 리엑트 인풋 에러 해결 방법 (1) | 2023.07.11 |