[React-Quill] 웹 에디터 적용기

사이드 프로젝트를 진행하면서 웹 에디터를 구현할 사항이 발생했습니다.

제 사이드 프로젝트의 Front 는 React 기반으로 되어있기에, React 에서 사용할 수 있는 웹 에디터를 찾던 중 react-quill 이라는 라이브러리를 알게되어 적용하게된 사항을 기록해보려 합니다.

---

1. react-quill 설치

전 VSCode 를 사용하면서 React 를 개발하고 있어, VSCode 내 터미널에서 아래 명령을 실행하여 react-quill 라이브러리를 설치했습니다.

npm install react-quill --save

 

위 명령어를 실행하면, 아래와 같이 react-quill 의존성이 추가됩니다.

``` package.json
{
  "name": "react-shoppingmall-partners",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.3.5",
    "bootstrap": "^5.2.3",
    "date-fns": "^2.29.3",
    "node-sass": "^7.0.3",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.4",
    "react-dom": "^18.2.0",
    "react-quill": "^2.0.0", // react-quill 의존성 추가 확인!
    "react-router-dom": "^6.10.0",
    "react-scripts": "5.0.1",
    "router-dom": "^2.2.10",
    "styled-components": "^5.3.9",
    "web-vitals": "^2.1.4"
  },
  // 이하 생략
}

 

 

2. react-quill 적용하기

패키지를 추가했으면, 이제 ReactQuill 이라는 기능을 사용할 수 있습니다.

저의 경우, Editor.jsx 파일을 생성하여 해당 파일에서 에디터에 관련된 모든 로직을 처리하였습니다.

물론, react-quill 도 Editor.jsx 에서 사용하고, 다른 컴포넌트에선 Editor.jsx 를 사용하게 합니다.

// Editor.jsx
import React from "react";
import ReactQuill from "react-quill";
import 'react-quill/dist/quill.snow.css'

const Editor = ({editorValue, onChangeEditorValue}) => {
    const formats = [
        "size", "color", "background", "bold", "italic",
        "underline", "strike", "blockquote", "list",
        "bullet", "indent", "link", "image",
    ];
    const toolbarOptions = [
        [{ size: ["small", false, "large", "huge"] }], // custom dropdown
        [{ color: [] }, { background: [] }], // dropdown with defaults from theme
        ["bold", "italic", "underline", "strike", "blockquote"],
        [
            { list: "ordered" },
            { list: "bullet" },
            { indent: "-1" },
            { indent: "+1" },
        ],
        ["link", "image"],
    ];

    return(
        <ReactQuill 
            style={{height: "350px", margin: "4px" }}
            value={editorValue}
            modules={{
                toolbar: {
                    container: toolbarOptions,
                }
            }}
            formats={formats}
            onChange={onChangeEditorValue}
        />
    );
}

export default Editor;

 

여기서 주의할 점은, <ReactQuill> 만을 사용하는 경우 실제로 화면에서 웹 에디터가 보이지 않습니다.

꼭, 'react-quill/dist/quill.snow.css' 를 같이 import 해주셔야 합니다.

 

위 처럼 React-Quill 을 활용하여 Editor.jsx 를 만들었다면, 이제 다른 컴포넌트에선 Editor.jsx 를 불러오면 됩니다.

import React, { useState } from "react";
import Editor from "../component/editor/Editor";

export default function PartnersProductsAddPage() {
    const [showImgFile, setShowImgFile] = useState();
    const [editorValue, setEditorValue] = useState("");
    
    // == 생략 == //
    return (
        <StyledAddPageWrapper>
            <StyledH4>상품 등록</StyledH4>
            <Form>
                {// == 생략 == //}
                <Form.Group className="mb-3">
                    <Form.Label>상품 설명</Form.Label>
                    <Editor editorValue={editorValue} onChangeEditorValue={setEditorValue} />
                </Form.Group>
            </Form>
            <StyledButtonWrapper>
                <Button size="lg" variant="outline-danger" className="w-50" onClick={cancel}>취소</Button>
                <Button size="lg" className="w-50" onClick={confirm}>상품 등록</Button>
            </StyledButtonWrapper>
        </StyledAddPageWrapper>
    );
}

 

3. 본문 이미지 삽입

웹 에디터를 적용한 가장 큰 이유가 바로 이 부분 입니다.

보통 온라인 쇼핑몰을 보면, 상품 설명 정보를 텍스트로 작성하다기보단, 잘 꾸며진 이미지들을 활용하는 걸 자주 볼 수 있습니다.

저 또한 그런 상황을 구현하기 위해 웹 에디터 도입을 하기로 했습니다.

 

앞에서 적용한 quill 에디터는 프로그램 실행 시, 아래와 같이 표시됩니다.

'상품 설명' 항목에 웹 에디터 적용

 

웹 에디터 상단 가장 우측에 있는 사진 아이콘을 클릭하면, 탐색기를 통해 이미지를 에디터에 등록할 수 있습니다.

 

이제 본문 이미지 정보와 에디터 텍스트 정보를 포함해서 백엔드에서 데이터를 저장하는 기능을 개발하면 되겠습니다.