[TIL] React-Quill

📓 React-Quill

---

📝 React-Quill이란?

React에서 사용할 수 있는 웹 에디터 라이브러리이다.

글씨 크기, 굵게, 기울임, 리스트, 링크, 이미지 삽입 등 다양한 서식을 쉽게 적용할 수 있다.

📝 React-Quill 설치

npm install react-quill

📝 React-Quill 적용

import ReactQuill from "react-quill";

const Editor = () => {
  return (
    <>
      <ReactQuill />
    </>
  );
}

export default Editor;

🚨 Next.js에서 적용 시 오류 🚨

document is not defined : document가 정의되기 전에 react-quill이 먼저 로드되어 아직 정의되지 않은 document를 조작하려고 하면서 발생하는 에러

Next.js는 SSR(Server Side Rendering)을 지원하기때문에 오류가 발생한다. (document는 view 및 기능이 로드된 시점에 정의)

⇒ document가 정의되기 전에 document에 접근하기 때문에 오류 발생!

💡 오류 해결 방법 : dynamic import 사용 💡

dynamic은 해당 모듈의 호출하는 시점을 document가 정의된 후에 호출할 수 있게 해준다.

import dynamic from "next/dynamic";

const ReactQuill = dynamic(() => import("react-quill"), {
  ssr: false,
});

const Editor = () => {
  return (
    <>
      <ReactQuill />
    </>
  );
}

export default Editor;

ssr: true ⇒ 서버에서 렌더링 O
ssr: false ⇒ 서버에서 렌더링 X

📁 에디터 컴포넌트 사용 페이지

"use client";
import Editor from "@/components/Editor/Editor";

export default function EditorPage() {
  return (
    <>
      <Editor />
    </>
  );
}

적용하면 아래 사진처럼 에러가 사라지고 뭔가가 나온다.
(당황스러운 CSS 적용하기 전 모습;;)

📝 React-Quill CSS 적용

import "react-quill/dist/quill.snow.css"(필수) 를 적용하면
요로코롬 웹 에디터가 만들어진다!

📝 React-Quill onChange 사용법

react-quill은 텍스트 에디터를 제공하는데, 해당 에디터의 onChange 이벤트는 일반적인 이벤트와는 다른 형식으로 데이터가 전달된다.

react-quill의 onChange 이벤트를 통해 에디터의 내용을 얻으려면 아래와 같이 작성해야한다.

const handleOnChange = (content: string) => {
	console.log(content);
}

onChange(content, delta, source, editor) : 데이터 값 변경에 따른 콜백함수

콘솔에 보이는것처럼 HTML형식(<p>내용</p>)으로 출력되는데, 문자열에 태그가 적용된 상태로 렌더링이 된다면 사용자가 임의로 웹페이지에 스크립트를 먹일 수 있어 취약점이 생기게된다.

React에서는 무조건 텍스트 형태로만 렌더링하게되어있다.

하지만 react-quill을 이용해서 글자에 스타일을 넣은 경우, 스타일이 적용된 상태로 화면에 보여져야한다.

태그를 문자열이 아닌 태그의 기능 그 자체로 인식하여 화면에 보여주기 위해서 dangerouslySetInnerHTML을 사용한다.

🚨 하지만 dangerouslySetInnerHTML은 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험하다.

이를 막기위해 DOMPurify를 사용해야한다!

💡 DOMPurify 설치 💡

npm install dompurify

👉🏻 typescript 사용 시 설치 필요
npm install --save-dev @types/dompurify

📝 React-Quill 커스텀