react-quill 라이브러리

기본 개념

• React 애플리케이션에서 사용할 수 있는 강력한 리치 텍스트 에디터 컴포넌트
• 원하는 양식대로 자유롭게 게시글을 작성할 수 있게하는 에디터 만들 때 유용함

---

설치 & 사용법

1. 설치하기

1. npm

npm install react-quill

2. yarn

yarn add react-quill

2. 사용할 파일에 import 하기

공식문서

import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

function MyComponent() {
  const [value, setValue] = useState('');

  return <ReactQuill theme="snow" value={value} onChange={setValue} />;
}

• 그럼 이렇게 생성이 됨

---

장점

• 사용하기 쉽고 React와 잘 통합됨
• 다양한 텍스트 서식 옵션을 제공함
• 커스터마이징이 용이함
• 이미지, 링크 등 멀티미디어 삽입을 지원함
• 모듈식 구조로 필요한 기능만 선택적으로 사용할 수 있음

예시 기능

• 공백을 추가할 수 있음
• bold 기능 사용 가능
• 글꼴 크기 변경 가능
• 링크 제공 가능
• 이미지 업로드 가능
• 즉, 원하는 양식대로 자유롭게 게시글 작성 가능

---

단점

• 번들 크기가 상대적으로 큼
• 복잡한 기능을 구현하려면 학습 곡선이 있을 수 있음
• 서버 사이드 렌더링(SSR)에서 사용할 때 추가 설정이 필요함

---

기본 사용 예시 코드

import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'; // 스타일 import

function Editor() {
  const [value, setValue] = useState('');

  return (
    <ReactQuill 
      theme="snow"
      value={value}
      onChange={setValue}
    />
  );
}

---

사용 상황

• 블로그 플랫폼: 사용자가 풍부한 서식의 블로그 포스트를 작성할 수 있음
• 이메일 작성 도구: HTML 이메일을 쉽게 작성할 수 있는 인터페이스를 제공함
• 문서 편집 시스템: 팀 협업을 위한 문서 편집 기능을 구현할 수 있음
• 댓글 시스템: 사용자가 서식이 있는 댓글을 작성할 수 있게 함
• 관리자 대시보드: 공지사항이나 제품 설명을 작성하는 데 사용할 수 있음

---

참고

• react-quill 공식 GitHub