React-Quill 주요 클래스 구조 정리

React-Quill은 Quill.js를 React 환경에서 사용할 수 있게 해 주는 wrapper 라이브러리입니다. 기본적으로 에디터를 렌더링할 때, 내부적으로 다양한 HTML 구조와 클래스명이 자동으로 붙습니다. 이 클래스들을 이해하면 커스터마이징(스타일 조정, 동작 제어 등)이 쉬워집니다. 이 글에서는 그 중 자주 마주치는 .ql-container, .ql-editor, .ql-toolbar 클래스의 의미와 역할을 정리합니다.

기본 DOM 구조

<div class="ql-container ql-snow">
  <div class="ql-toolbar ql-snow">
    <!-- 툴바 버튼들 -->
  </div>
  <div class="ql-editor" contenteditable="true">
    <!-- 사용자가 작성하는 영역 -->
  </div>
</div>

주요 클래스 설명

.ql-container

• 역할: 에디터 전체를 감싸는 최상위 wrapper

• 특징: 스크롤 처리, 외부 스타일링 적용의 기준이 됨

• 스타일 예시:

  .ql-container {
    height: 300px;
    border: 1px solid #ccc;
  }

.ql-toolbar

• 역할: 버튼, 드롭다운 등 에디터 상단 도구 모음 UI

• 위치: .ql-container의 첫 번째 자식

• 사용 팁: 커스텀 툴바 구성 시 modules.toolbar 직접 지정

.ql-editor

• 역할: 사용자가 실제로 텍스트 입력하는 영역

• 속성: contenteditable="true"

• 주의: 스타일(line-height, font-family 등)을 별도 지정 권장

  .ql-editor {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    line-height: 1.6;
  }

커스터마이징 시 주의점

• 클래스 이름은 Quill.js 내부에서 자동 생성되므로 CSS로 덮어쓰기 방식 사용

• Tailwind CSS 등 쓰면 global.css나 @layer base 등 전역에서 스타일 오버라이드 필요

• 툴바가 필요 없으면 modules={{ toolbar: false }} 설정 가능