Next.js 프로젝트에 react-quill 적용하기

공지사항을 원장님이 직접 작성하시기 위해서는 텍스트 에디터를 삽입해 글 작성을
용이하게 만들 필요가 있었다. 원장님이 사용할 것 이기 때문에 가장 직관적인 WYSIWYG(What You See Is What You Get) 에디터 중에서 선택하는 것이 좋을 것 같았다. 그 중 적용방법이 간편한 Quill-editor를 선택하게 되었다.

---

1. Quill Editor 설치방법

npm install react-quill

먼저 터미널을 실행 시켜 react-quill 라이브러리를 설치한다.

---

2. Quill Editor 생성하기

cocmponents 폴더에 NoticeEditor.js라는 이름의 파일을 생성해 주었다.

2-1) next의 dynamic을 이용하여 react-quill import 해주기

react-quill을 import할 때에는 바로 상단에 import하지 않고, next의 dynamic을 사용하여 import 해야한다. 이렇게 처리해주지 않으면 'document is not defined'에러가 나오는데, 이는 react-quill에서는 ssr이 지원되지 않기 때문이다. document가 정의되기 전에 react-quill이 먼저 로드 되어 아직 정의되지 않은 document를 조작하려고 하면서 발생하는 에러이다.

Next.js의 dynamic 속성은 모듈을 동적으로 import 할 수 있도록 해준다.
dynamic import를 하게 되면 react-quill 모듈을 서버 측에 포함시키지 않고, 런타임시에 import하게 해준다.

import 코드

import dynamic from 'next/dynamic'
import 'react-quill/dist/quill.snow.css';

const QuillNoSSRWrapper = dynamic(import('react-quill'), {
  ssr: false,
  loading: () => <p>Loading ...</p>,
});

이렇게 dynamic을 이용하여 ssr 속성을 false로 처리해 주어야 더이상 에러가 나지 않는다.

2-2) Modules, formats 커스터마이징 하기

import dynamic from 'next/dynamic'
const QuillNoSSRWrapper = dynamic(import('react-quill'), {
  ssr: false,
  loading: () => <p>Loading ...</p>,
});

const modules = {
  toolbar: {
    container: [
      [{ header: '1' }, { header: '2' }, { font: [] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
    ],
  },
};

const formats = [
  'header',
  'font',
  'size',
  'bold',
  'italic',
  'underline',
  'strike',
  'blockquote',
];

이 옵션외에도 이미지, 비디오, 링크 등의 다양한 옵션을 넣을 수 있지만 나는 텍스트 편집기능만을 원하기 때문에 다른 옵션들은 삭제해 주었다.

2-3) 적용하기

export default function NoticeEditor() {
	return(
      <QuillNoSSRWrapper
            modules={modules}
            formats={formats}
            theme='snow'
            value={Content}
            onChange={setContent}
            ref={quillRef}
            style={{
              height: '460px',
              width: '100%',
            }}
       />
    )
}

적용된 quill-editor의 모습이다. quill-editor의 값은 onChange를 통해 useState값인 Content에 담아서 관리하고 있다.

Content state값을 콘솔에 찍어보면 태그와 텍스트가 함께 찍혀나온다.

---

3. Quill Editor 데이터를 다시 html 형식으로 변환하기

해당 데이터를 서버에 저장했다가 다시 데이터를 사용하고자 하는 디테일 페이지로 불러내면,
html 형식으로 찍히지 않고 텍스트로만 표시된다. 해당 데이터를 다시 html 형식으로 변환하기 위해서 나는 dangerouslySetInnerHTML 속성을 사용하였다.

      <ContentWrap
          dangerouslySetInnerHTML={{ __html: quill-editor 데이터 넣는곳 }}
      />