react-quill lib이란? react-quill을 사용하지 말자

이제 나만의 시험지를 생성할 수 있는 페이지를 제작할 것이다. 모든 기능의 툴을 일일이 제작하는 방법도 있겠지만 라이브러리를 이용해서 빠르게 작업을 수행하면 좋게다고 판단을 했다. FE팀원이 알아봐준 결과 react-quill이라는 라이브러리가 정보와 자료가 많다고 추천을 해주었다. 그래서 이번 시간에는 react-qull 라이브러리를 알아보려고 한다. 우선 react-quill 라이브러릴 npm으로 설치하고 기본적인 세팅을 해보겠다. 기본적인 세팅을 아래와 같다.

# setting react-quill

 

import ReactQuill from "react-quill"

export default function EditTestSplit() {

  return (

    <>

      <h1>Test</h1>

      <ReactQuill></ReactQuill>

    </>

  )

}

 

위와 같이 작성하고 브라우저로 띄워보면 아래와 같은 결과가 나온다.

브라우저의 일부만 캡쳐한 이미지이다.

# import Css

브라우저상의 렌더링이 된 결과를 보면 기본적으로 제공되는 버튼들과 이미지인 것 같다. 이미지가 이렇게 중구 난방으로 정렬이 되는 것이 맞는지 찾아보니 css를 꼭 import해야한다는 것을 알았다. 아래는 css를 추가해 수정된 코드이다.

 

import ReactQuill from "react-quill"

import "react-quill/dist/quill.snow.css"

export default function EditTestSplit() {

  return (

    <>

      <h1>Test</h1>

      <ReactQuill></ReactQuill>

    </>

  )

}

 

css를 import하면 나오는 결과 이다.

이제 quill 라이브러가 제대로 import된 것을 확인 했고 해당 편집기의 툴들을 내가 원하는 것들만 커스텀할 수 있게 코드를 작성해 보려고 한다. 아래 코드는 내가 원하는 툴들을 커스텀한 코드이다.

 

import ReactQuill from "react-quill"

import "react-quill/dist/quill.snow.css"

export default function EditTestSplit() {

  const modules = {

    toolbar: {

      container: [

        ["image"],

        [{ header: [1, 2, 3, 4, 5, false] }],

        ["bold", "underline"],

      ],

    },

  };

  return (

    <>

      <h1>Test</h1>

      <ReactQuill

        style={{ width: "800px", height: "600px" }}

        modules={modules}

      />

    </>

  )

}

 

우선 ReactQuill 컴포넌트에 modules라는 프로퍼티에는 편집기에서 사용할 다양한 모듈을 구성하는 데 사용되는 객체를 전달할 수 있다. 위 코드에서는 modules 객체를 생성하여 원하는 기능을 설정했다. 이를 통해 이미지 삽입, 헤더 스타일 설정, 그리고 볼드체 및 밑줄과 같은 텍스트 스타일 지정과 같은 기능들을 편집기에 추가할 수 있다. 우리에게 필요한 건 이것을 에디터 상태에서 읽기 상태로 변환 할 수있게 제작을 해야한다.

# useState를 사용해서 변화된 값들을 적용하기

useState를 사용해서 내가 입력한 값들을 log로 받아 보자. 그러기 위해서는 useState를 사용해서 해당 input 프로퍼티의 onChange를 넣어서 값을 받아 와야한다. 먼저 useState를 생성해보자. 아래 코드는 useState와 필요한 input과 버튼들만 삽입한 코드이다.

import { useState } from "react"; 

import ReactQuill from "react-quill"

import "react-quill/dist/quill.snow.css"

  ...

  const [content, setContent] = useState("");

  const [title, setTitle] = useState("");

  return (

    <>

      <div>

        <div>

          <label htmlFor="title">Title</label>

          <input id="title" type="text"></input>

          <h1>Test</h1>

          <ReactQuill

            style={{ width: "800px", height: "600px" }}

            modules={modules}

          />

        </div>

      </div>

      <div>

        <button style={{ marginTop: "50px" }}>제출</button>

      </div>

    </>

  )

}

각 필요한 함수를 작성해보자. 아래 코드는 필요한 핸들링 함수만 작성한 코드이다.

  const [title, setTitle] = useState("");

  const [content, setContent] = useState("");

  const handleChange = (e) => {

    setTitle(e.currentTarget.value);

    setContent(e.currentTarget.value);

    console.log(title);

    console.log(content);

  }

위의 코드를 이제 적절한 위치에 onChange를 이용해서 jsx에 대입을 하면 아래와 같아.

return (

    <>

      <div>

        <div>

          <label htmlFor="title">Title</label>

          <input id="title" type="text" onChange={handleChange}></input>

          <h1>Test</h1>

          <ReactQuill

            style={{ width: "800px", height: "600px" }}

            modules={modules}

            onChange={handleChange}

          />

        </div>

      </div>

      <div>

        <button style={{ marginTop: "50px" }}>제출</button>

      </div>

    </>

  )

위 와같이 작성하면 코드가 에러가 나는데 구체적인 에러와 이유는 아래 더보기를 참고해보자.

위와 같은 에러가 난 이유는 react-quill컴포넌트 내부에 onChange가 있는데 이는 이벤트로 처리 할 수 없기 때문에 위와 같은 에러가 발생하는 것이다.  react-quill 은 내부적으로 복잡한 객체를 사용하여 에디터의 내용을 관리하고, 이벤트 핸들러로 전달되는 값은 내부적 복잡한 객체 다.

## 내부적 복잡한 객체

 react-quill은 quill 에디터의 react 래퍼(wrapper)이며, quill 에디터는 내부적으로 복잡한 상태 관리 및 렌더링을 처리한다. 따라서,  react-quill의 onChange 이벤트 핸들러는 표준 HTML 입력 요소의 이벤트와는 다른 매개변수를 받는다. 그래서 첫 번째 인자로는 content: 에디터의 현재 내용을 나타내는 문자열이나 Delta 객체이다. Delta 객체는 quill에서 내용의 변경 사항을 표현하는 데 사용하는 표준 포맷이다.

 

  function handleChange(content, delta, source, editor) {

    console.log(editor.getContents()); // 에디터의 현재 내용을 Delta 객체로 가져옵니다.

    console.log(content); // 에디터의 현재 내용을 HTML 문자열 또는 Delta 객체로 가져옵니다.

  }

 

위 코드를 수정 하기 위해서는 아래와 같이 코드를 작성하면된다.

  const [title, setTitle] = useState("");

  const [content, setContent] = useState("");

  const handleTitleChange = (e) => {

    setTitle(e.currentTarget.value);

    console.log(title);

  }

  const handleTextChange = (text) => {

    setContent(text);

    console.log(text ;

  }

 

전체 코드는 아래 더보기를 확인하면 된다.

import { useState } from "react";

import ReactQuill from "react-quill"

import "react-quill/dist/quill.snow.css"

export default function EditTestSplit() {

  const modules = {

    toolbar: {

      container: [

        ["image"],

        [{ header: [1, 2, 3, 4, 5, false] }],

        ["bold", "underline"],

      ],

      userOnly: true

    },

    clipboard: {

      // 클립보드 모듈을 비활성화하여 복사 및 붙여넣기 기능을 사용하지 않음

      matchVisual: false,

    },

    history: {

      // 히스토리 모듈을 비활성화하여 undo 및 redo 기능을 사용하지 않음

      delay: 2000,

      maxStack: 500,

      userOnly: false,

    },

    keyboard: {

      // 키보드 모듈을 비활성화하여 키보드 입력 기능을 사용하지 않음

      bindings: {},

    },

  };

  const [title, setTitle] = useState("");

  const [content, setContent] = useState("");

  const handleTitleChange = (e) => {

    setTitle(e.currentTarget.value);

    console.log(title);

  }

  const handleTextChange = (text) => {

    setContent(text);

    console.log(text ;

  }

  // const handleTitleChange = (e) => {

  //   setTitle(e.currentTarget.value);

  //   console.log(title); //입력 확인하는 log

  // };

  // const handleSubmit = async () => {

  //   const date = new Date();

  //   try {

  //     await createPost({

  //       title: title,

  //       content,

  //       date,

  //     }).then((res) => console.log(res))

  //   } catch (error) {

  //     console.log(error);

  //   }

  // };

  return (

    <>

      <div>

        <div>

          <label htmlFor="title">Title</label>

          <input id="title" type="text" onChange={handleTitleChange}></input>

          <h1>Test</h1>

          <ReactQuill

            style={{ width: "800px", height: "600px" }}

            modules={modules}

            onChange={handleTextChange}

          />

        </div>

      </div>

      <div>

        <button style={{ marginTop: "50px" }}>제출</button>

      </div>

    </>

  )

}

# 입력 textArea 비활성화 그리고 quill 생성자와 useEffect

우리는 현재 입력한 textArea 부분을 비활성화 하려고 한다. 그렇게 하기 위해서는 우선 reactQuill과 Quill의 차이를 알아야한다. Quill은 객체를 생성해야 한다. 아래와 같이 코드를 작성하면 된다.

 

import { useEffect, useRef } from 'react';

import Quill from 'quill';

import 'quill/dist/quill.snow.css';

export default function EditTestSplit() {

  const editorRef = useRef(null);

  useEffect(() => {

    if (editorRef.current) {

      const quill = new Quill(editorRef.current, {

        theme: 'snow',

        modules: {

          toolbar: true // 툴바를 활성화합니다.

        }

      });

    }

  }, []);

  return (

    <div>

      <div ref={editorRef} style={{ display: 'none' }}></div>

    </div>

  );

}

위의 코드를살펴보면 기존 react-quill을 사용하지 않고 quill이라는 라이브러리로 세팅을 했다. quill을 생성하기 위해서는 uesEffect로 quill을 생성자로 생성하고 조작을 해야한다. 일반적으로 DOM 요소에 대한 조작은 react 컴포넌트가 마운트된 후에 이루어져야 한다. 그렇기 때문에 보통 useEffect 훅을 사용하여 이를 처리해야 한다. 여기서 우리는 의문을 가질 것이다. 왜 DOM에 이렇게 우리가 집착을 하면서 코드를 작성해야 하는가 말이다. 우선 quill 라이브러리는 js에 환경에 사용할 수 있는 라이브러리인 것이다.  즉, 일반적으로 js에서 DOM에 접근하는 방식으로 코드가 작성 되었다는 것을 알 수 있다. 이 말은 quill 라이브러리가 react의 특징인 virtualDOM을 고려해서 제작된 것이 아니기에 react-quill을 사용하는 것이 적절 하다는 것을 알 수 있다. 실제로 react에서 DOM에 접근을 해야하는 상황이 있다하면 react에서 권장하지 않는다. 

useEffect 내에서 quill 생성자를 사용하는 것은 컴포넌트가 렌더링되고 해당 DOM 요소가 생성된 후에 quill 생성자를 초기화하기 위한 것이다. 초기화를 하는 이유는 앞서 말했지만 DOM에 직접적으로 삽입을 하기 때문이다.  quill과 같은 WYSIWYG 에디터는 DOM 요소에 직접적으로 연결되어 작동한다. 따라서 DOM요소에 직접적으로 연결이 되어 있기 때문에 해당 요소가 생성된 후에 quill을 초기화해야만 제대로 작동한다. react에서는 DOM 요소의 생성 및 조작을 관리하기 위해 virtualDOM을 사용하며, 컴포넌트의 렌더링이 완료된 후에 실제 DOM 요소가 생성된다. 이후에는 useEffect나 componentDidMount와 같은 메서드를 사용하여 DOM 요소에 대한 초기화 작업을 수행할 수 있다. 초기화 이전에 DOM 요소가 없으면 quill이 연결될 대상이 없기 때문에 에러가 발생할 수 있다. 결론 적으로 리액트 환경에 quill 라이브러리를 끼워 맞춰 개발하는 것은 큰 무리가 있다는 것을 알 수있었다.

아래 더보기를 통해서 언마운트와 마운트의 관한 글을 참고할 수 있다.

## react의 언마운트와 마운트

마운트는 React 컴포넌트가 DOM에 삽입되는 과정을 가리킨다. 즉 컴포넌트가 생성되고 브라우저의 실제 DOM에 추가되는 시점이다. React에서 컴포넌트가 처음으로 DOM에 삽입될 때, 다음과 같은 일련의 단계가 발생한다.

1. constructor(): 컴포넌트의 생성자 메서드가 호출된다. 이 단계에서는 초기 상태를 설정하거나 메서드를 바인딩하는 등의 작업을 수행한다.

2. static getDerivedStateFromProps(): 이 메서드가 있다면 props로부터 상태를 도출하거나 동기화하는 작업을 수행한다. 그러나 이 메서드는 필수는 아니니다.

3. render(): 컴포넌트가 렌더링된다. 이 메서드에서는 React 엘리먼트를 반환하여 사용자 인터페이스를 구성힌다.

4. componentDidMount(): 컴포넌트가 DOM에 삽입된 직후에 호출된다. 이 단계에서는 초기화 작업, 외부 데이터 로딩 등의 비동기 작업을 수행한다.

이 단계가 완료되면 React 컴포넌트가 성공적으로 DOM에 마운트되었다고 말한다. 컴포넌트의 마운트가 완료되면 이후에는 업데이트나 언마운트와 관련된 생명주기 메서드가 호출된다.

# React-Quill과 Quill의 차이

가장 큰 차이는 일반 quill은 순수 자바스크립트로 작성된 라이브러리이며 react-quill은 react 애플리케이션에서 quill을 쉽게 사용할 수 있도록 react 컴포넌트로 래핑된 것이다. react-quill은 quill 라이브러리를 react 애플리케이션과 더 쉽게 통합할 수 있게 해준다는 차이가 있다. 따라서 react-quill은 react 컴포넌트로 제공되기 때문에 일반적인 react 컴포넌트처럼 사용할 수 있다. 이는 react 애플리케이션의 상태와 상호작용하거나 react의 생명주기 메서드와 함께 사용할 수 있다. 반면에 일반 quill은 react 컴포넌트가 아니므로 react와의 통합이 더 어렵다. 그렇다고 react-quill이 우리가 생각하는 만큼 조작하기 쉬운 것은 아니다. 위에서도 언급했 듯 event처리가 쉽지 않다는 것을 알 수 있으며 내부의 복잡성이 있어서 하나하나 파해치고 분리해서 사용하기 어렵다. 

* 래핑이란?

## 래핑이란?

react 컴포넌트에서의 래핑은 다른 컴포넌트나 요소를 감싸서 새로운 컴포넌트를 생성하는 것을 말합니다.

---

* Reference

React-Quill 사용하기(1)

### 이미지 크기 줄이기

Quill React 에디터 사용해보기 (이미지 업로드 및 사이즈 조절)

---

# 결론

우리가 현재 진행하고 있는 프로젝트에 react-quill과 quill은 여러면에서 적합하지 않다. 기본적인 게시판과 같은 단순한 형태라면 간단하고 일반적으로 사용할 수 있겠지만 여러 상황과 상태에서 동작구현을 세밀하게 하기 위해서는 라이브러리를 사용하는 것은 여러 제한을 받는다. 라이브러리를 사용하는 것이 개발 시간을 단축 시키는 것은 사실이지만 상황과 현 개발 목적에 따라 시간의 단축과 지연은 달라진다는 것을 채감하게 되었다. 우리의 개발 목적은 좀 더 자율성이 확보되면서 세심하게 조작과 동작이 가능해야한다. 현재 react-quill과 quill라이브러리를 조사하고 여러 실험과 적용하는데 들어간 시간이 4일이나 되었다는 점을 고려하면 직접 editor와 tool들을 구현하는 것이 더 나은 선택이라는 것을 알았다. 정리 하자면 우리가 해당 라이브러리를 사용하지 않는 것의 이유는 다음 아래와 같다.

• 라이브러리의 제약
  1. react-quill은 onClick과 같은 여러 이벤트 처리를 할 수 없다. 이는 즉, 우리 개발의 자율성을 떨어트린다.
  2. quill은 바닐라 js에 적합한 라이브러리다. react에서 구동은 할 수 있으나 quill은 DOM에 직접적인 삽입 과정이 필요해서 마운트를 고려해 useEffect를 통해 초기화를 해줘야 라이브러리가 정상적으로 동작을 한다.

이러한 이유로 editor와 tool을 직접 구현하기로 했다. 이번 포스팅에서는 react-quill과 quill을 실험해봤던 내용을 담고 있지만 내가 실험했던 모든 수행과정들을 담아 내지 못했다. 너무 많은 정보들을 불필요하게 늘어 놓기 보다. 과정 중 중요했던 부분들만 뽑아 작성을 했다.