웹에디터 비교

React-Quill VS react-draft-wysiwyg

이번에 새롭게 시작한 프로젝트에서 웹 에디터를 사용해야 할 일이 생겨서 두 개의 라이브러리를 직접 사용해 본 후기를 작성하겠습니다.

react-draft-wysiwyg_editor.tsx

import { EditorProps } from "react-draft-wysiwyg";
import { EditorState } from "draft-js";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import dynamic from "next/dynamic";
import { useState } from "react";

const Editor = dynamic<EditorProps>(
  () => import("react-draft-wysiwyg").then((mod) => mod.Editor),
  {
    ssr: false,
  }
);

const MyEditor = () => {
  const [editorState, setEditorState] = useState<EditorState>(
    EditorState.createEmpty()
  );

  const updateTextDescription = (state: EditorState) => {
    setEditorState(state);
  };

  const uploadCallback = () => {
    console.log("이미지 업로드");
  };

  return (
    <div>
      <Editor
        editorState={editorState}
        onEditorStateChange={updateTextDescription}
        toolbar={{
          inline: {
            options: ["bold", "italic", "underline", "strikethrough"],
          },
          blockType: {
            inDropdown: false,
            options: [
              "Normal",
              "H1",
              "H2",
              "H3",
              "H4",
              "H5",
              "H6",
              "Blockquote",
              "Code",
            ],
          },
          image: { uploadCallback: uploadCallback },
        }}
        localization={{ locale: "ko" }}
        editorStyle={{
          width: "100%",
          height: "100%",
        }}
        placeholder="여러분의 경험을 자유롭게 적어주세요."
      />
    </div>
  );
};

export default MyEditor;

위의 코드가 내가 작성한 "react-draft-wysiwyg" 라이브러리를 사용한 코드인데 적용하는 과정에서 typescript를 사용함으로서 생기는 문제점이 있었는데, 바로 'window is undefined' error 이다.

이 에러는 빌드타임에서 불러오는 것이 불가능하기 때문에 NextJs에서 제공하는 dynamic module을 활용해 런타임에서 라이브러리를 불러오도록 하는 방식으로 해결해야 하는데

const Editor = dynamic<EditorProps>(
  () => import("react-draft-wysiwyg").then((mod) => mod.Editor),
  {
    ssr: false,
  }
);

이 코드가 바로 해당 에러를 해결하기 위해 넣어준 코드이다.
그리고 또 다른 문제가 있었는데
이런 식으로 적용이 잘 되었으나 드롭다운 메뉴나 사진 및 이모티콘 아이콘을 클릭하면 효과가 실행이 되지 않는 오류를 발견하였다..
공식 문서 참조 및 구글링, 챗 gpt에 이유를 검색해보았으나 해결하지 못했고 결국 React-Quill 을 사용하기로 결정했다.

일단 여기까지 "react-draft-wysiwyg" 라이브러리를 사용해봤을 때 장점과 단점을 정리해보겠다.

• 장점 : 기본적인 사용이 쉽고, 유명한 페이스북에서 관리하는 에디터인 draft.js를 사용하기 쉽게 리액트로 구성한 것입니다.
• 단점 : 한글을 입력할 때 바로바로 onChange가 되지않아 글자를 작성하고 바로 Shift + Enter키 (p 태그 없이 띄어쓰기)를 할 때 상태값이 변하지않아 꼬이는 현상이 발생한다. 그에 따라, 기존에 작성중이던 글자들이 삭제되는 현상이 발생합니다. 이는 한국어에 해당되는 내용으로 한글을 사용할때 발생한 문제이다. 또한 공식 문서와 서치했을 때 다양한 자료들이 2020년도에 해당해서 좀 오래됐고 에러도 고치지 않아 사용함에 있어서 약간 불편함이 있었다.

다음 게시물에서는 react-quill의 사용과 장단점에 대해 포스팅 할 예정이다.