Next.js에서 ReactQuill 사용 방법

in Front-end
Next.js에서 ReactQuill 사용 방법

Next.js에서 ReactQuill 사용 방법에 대해 설명하는 페이지입니다.

Environment

  • Next.js 14.2.3
  • react-quill v2.0.0

목차

Step 1 - ReactQuill 패키지 설치

다음 명령어를 입력하여 ReactQuill 패키지를 설치합니다.

npm install react-quill

Step 2 - ReactQuill 모듈 로드하기

document is not found

React 프로젝트와 달리 Next.js에서 ReactQuill를 직접 로드하려고 하면 document is not found 에러가 발생합니다. 이는 ReactQuill에서 document 객체를 활용하기 때문입니다. 따라서 Next.js에서는 document가 먼저 로드된 후에 ReactQuill 모듈을 불러오도록 수정해야 합니다.

Dynamic Import

document가 로드된 후 ReactQuill 모듈을 로드하기 위해선 지연 로딩(lazy loading)을 활용하면 됩니다. Next.js에서는 지연 로딩(lazy loading)을 두 가지 방식으로 지원합니다.

  1. next/dynamic로 동적 임포트(dynamic import)하는 방법
  2. React.lazy()와 Suspense를 이용하는 방법

이 중에서 동적 임포트를 통해 ReactQuill 모듈을 로드하면 됩니다. 다음과 같이 next/dynamic로 클라이언트 사이드(= 브라우저)에서 모듈을 불러오도록 설정합니다.

import dynamic from "next/dynamic";

// react-quill은 서버 사이드 렌더링을 지원하지 않기 때문에
// 클라이언트 사이드에서 모듈을 불러오도록 설정한다.
// 이를 통해 "document is not found" 에러를 방지할 수 있다.
const ReactQuill = dynamic(() => import("react-quill"), {
  ssr: false,
  loading: () => <div>loading...</div>,
});

위의 코드에서 ssr: false는 pre-rendering, 즉 서버 사이드 렌더링을 하지 않고 클라이언트 사이드에서만 로드하겠다는 의미입니다. 또한 loading은 동적 임포트가 완료되기 전에 표시할 컴포넌트를 지정하는 부분입니다.

Step 3 - Quill 에디터 사용하기

다음과 같이 Quill 에디터를 사용하는 컴포넌트를 작성합니다.

reactquill0

위의 코드의 주요 부분을 설명하자면 다음과 같습니다.

  • "use client": ReactQuill 모듈을 클라이언트 사이드에서 로드해야 하므로 컴포넌트를 클라이언트 컴포넌트로 선언합니다.

  • import "react-quill/dist/quill.snow.css";: Quill 에디터에서 사용할 테마를 지정하는 부분입니다. css 파일을 임포트하고 난 후 theme="snow"와 같이 사용하려는 테마를 지정하면 됩니다. 테마로는 다음과 같이 2종류가 존재합니다.

    • bubble

      reactquill1

    • snow

      reactquill2

  • import "@/styles/quillEditor.css";: Quill 에디터를 커스텀하는 css 파일을 임포트합니다. 해당 부분은 아래 Step 4 - Quill 에디터 커스텀하기 부분에서 다루도록 하겠습니다.

  • modules: Quill 에디터의 toolbar를 커스텀하는 부분입니다. 이미지 삽입 기능을 추가하거나 글씨 관련 기능 추가 등 여러 기능을 커스텀할 수 있습니다. 옵션들의 경우 다음 링크를 참고하시길 바랍니다.

    Toolbar Module - Quill Rich Text Editor

    reactquill3

Step 4 - Quill 에디터 커스텀하기

css 파일을 생성하여 위에서 생성한 Quill 에디터 컴포넌트를 커스텀할 수 있습니다. 다음은 Quill 에디터를 커스텀한 예시입니다.

/* quillEditor.css */

.ql-toolbar {
  margin-top: 1.125rem;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.ql-container {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

/* 최소 크기 지정 및 padding 제거 */
.ql-editor {
  padding-top: 1rem;
  padding-left: 1rem;
  min-height: 22.625rem;
  font-size: 1rem;
  line-height: 1.5;
}

.ql-editor.ql-blank::before {
  left: 1rem;
}

해당 css 파일을 Quill 에디터 컴포넌트에서 임포트하면 커스텀을 할 수 있습니다.

// QuillEditor.tsx

import "@/styles/quillEditor.css";

(... 생략)

다음은 위에서 선언한 toolbar 옵션과 Quill 에디터를 커스텀한 결과입니다.

reactquill4

Comments