React-Quill: 리액트를 위한 강력한 위지위그(WYSIWYG) 에디터
웹 서비스에서 게시판, 블로그, 혹은 관리자 페이지를 만들 때 사용자가 텍스트를 꾸미고 이미지를 삽입할 수 있는 에디터 기능은 필수적입니다. 수많은 라이브러리 중 React-Quill은 가볍고 확장성이 뛰어나 가장 많이 선택되는 도구입니다.
이번 포스팅에서는 React-Quill을 프로젝트에 도입하는 기본적인 방법부터, 실무에서 반드시 마주하게 되는 커스텀 설정 및 최적화 팁을 공유해 드립니다.
1. React-Quill 설치 및 기본 설정
먼저 라이브러리를 프로젝트에 설치해야 합니다. Quill 본체와 리액트용 래퍼를 함께 관리하기 위해 아래 명령어를 입력하세요.
npm install react-quill
# 또는
yarn add react-quill설치가 완료되었다면, 기본적인 컴포넌트 구성은 매우 간단합니다. 다만, CSS 파일을 반드시 임포트해야 에디터의 UI가 정상적으로 출력된다는 점을 유의하세요.
import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'; // 테마 스타일 적용
function EditorComponent() {
const [value, setValue] = useState('');
return (
<ReactQuill theme="snow" value={value} onChange={setValue} />
);
}2. 실무를 위한 툴바 커스터마이징
기본 툴바에는 너무 많은 기능이 있거나, 반대로 필요한 기능이 없을 수 있습니다. modules와 formats 속성을 사용하여 필요한 기능만 선별할 수 있습니다.
- Header: 글의 구조를 잡기 위한 H1, H2 등 제목 설정
- Font Style: 굵게(Bold), 기울임(Italic), 밑줄(Underline)
- List: 순서 있는 목록과 없는 목록
- Media: 이미지 및 비디오 삽입
const modules = {
toolbar: [
[{ 'header': [1, 2, false] }],
['bold', 'italic', 'underline','strike', 'blockquote'],
[{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
['link', 'image'],
['clean']
],
};3. 주의사항: 이미지 핸들링과 성능 최적화
React-Quill의 기본 설정은 이미지를 Base64 인코딩 방식으로 본문에 포함합니다. 이는 별도의 서버 설정 없이 편리하지만, 포스팅의 용량이 비대해져 데이터베이스 부하와 페이지 로딩 속도 저하를 야기합니다.
전문가 팁: 실무에서는 'imageHandler'를 커스텀하여 이미지를 클릭했을 때 서버(S3 등)에 먼저 업로드하고, 반환된 이미지 URL을 본문에 삽입하는 방식을 권장합니다.
Next.js 사용 시 주의할 점
React-Quill은 브라우저의 document 객체를 참조합니다. 따라서 서버 사이드 렌더링(SSR)을 지원하는 Next.js 환경에서는 Dynamic Import를 사용하여 클라이언트 사이드에서만 렌더링되도록 설정해야 'document is not defined' 에러를 피할 수 있습니다.
import dynamic from 'next/dynamic';
const ReactQuill = dynamic(() => import('react-quill'), {
ssr: false,
loading: () => <p>Loading Editor...</p>,
});마치며
React-Quill은 직관적인 API와 강력한 커스텀 기능을 제공하여 개발 생산성을 크게 높여줍니다. 오늘 배운 툴바 설정과 SSR 대응 방법을 활용하여 여러분의 프로젝트에 최적화된 에디터를 구현해 보시기 바랍니다.