next.js에서 reactQuill useRef 사용해서 게시글 수정페이지에서 기존값 받아오기

게시글 수정 페이지에서 reactQuill에 게시글 수정 전에 입력한 값을 받아오려고 했다.

 

기존 코드

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


const ReactQuill = dynamic(async () => await import("react-quill"), {
  ssr: false,
})


export default function BoardWriteUI(props: IBoardWriteUIProps) {
  const QuillRef = useRef<ReactQuill>()

  let quill = QuillRef.current?.getEditor()
  
  
  <ReactQuill
              placeholder={
                props.isEdit
                  ? props.data?.fetchUseditem.contents
                  : "상품을 설명해주세요"
              }
              onChange={props.handleChangeContents}
              style={{ width: "100%", height: "300px" }}
              ref={QuillRef}
            />
 }

reactquill ref.getEditor is not a function 에러가 떴다.

 

개선

const ReactQuill = dynamic(
  async () => {
    const { default: RQ } = await import("react-quill")

    return ({ forwardedRef, ...props }) => <RQ ref={forwardedRef} {...props} />
  },
  {
    ssr: false,
  }
)


const QuillRef = useRef<ReactQuill>(false)

  useEffect(() => {
    if (props.isEdit) {
      if (QuillRef.current) {
        const quill = QuillRef.current.getEditor()
        quill?.clipboard.dangerouslyPasteHTML(0, "test")
      }
    }
  }, [QuillRef])
  

export default function BoardWriteUI(props: IBoardWriteUIProps) {
  const QuillRef = useRef<ReactQuill>()

  let quill = QuillRef.current?.getEditor()
 
 
               <ReactQuill
                placeholder={
                  props.isEdit
                    ? props.data?.fetchUseditem.contents
                    : "상품을 설명해주세요"
                }
                onChange={props.handleChangeContents}
                style={{ width: "100%", height: "300px" }}
                forwardedRef={QuillRef}
              />

1. const ReactQuill = dynamic(...)
Next.js에서 제공하는 'dynamic' 함수를 사용하여 클라이언트-사이드에서만 'react-quill' 모듈을 불러온다.

 

2. const QuillRef = useRef<ReactQuill>(false)
useRef를 사용해 'ReactQuill' 타입의 'QuillRef'를 정의하며, false 값을 초기값으로 설정한다.

3. useEffect(...)
'useEffect' 훅을 사용하여, 조건문에 따른 작업을 실행한다.

여기서 props.isEdit이 참일 때, QuillRef가 존재한다면 'getEditor()' 메서드를 호출해 Quill 인스턴스를 가져오고, 'dangerouslyPasteHTML' 메서드를 사용해 편집기의 커서 위치에 HTML을 삽입한다.

4. const QuillRef = useRef<ReactQuill>()
'ReactQuill' 타입의 'QuillRef'를 정의한다.

5. let quill = QuillRef.current?.getEditor()
'current' 속성에서 Quill 인스턴스를 가져온다.

6. <ReactQuill ... />
'ReactQuill' 컴포넌트를 렌더링하고, 여러 속성을 전달한다.

 

forwardedRef를 사용하는 이유?

Next.js의 dynamic 함수를 사용하여 불러온 'react-quill' 모듈에서 ReactQuill 컴포넌트에 직접 참조(ref)를 전달하기 위해서다.

 

리액트에서 ref 전달이 일반적으로 ref라는 속성을 사용해 이루어지지만, 여기서 `forwardedRef`를 사용하는 것은 `dynamic 함수와의 호환성` 때문이다. dynamic 함수를 통해 생성된 컴포넌트는 기본적으로 ref 속성을 자동으로 전달하지 않는다. 따라서 원하는 컴포넌트에 ref를 전달하기 위해서는 그것을 명시적으로 수동으로 전달해야 한다. 이를 통해 ReactQuill 컴포넌트의 참조를 얻게 된다.

 

결과적으로, 이 방법은 Next.js의 dynamic 함수를 사용하면서도 필요한 외부 컴포넌트에 대한 참조를 유지하고 접근할 수 있게 해준다.

 

 

참고 자료

https://shinejaram.tistory.com/71

React-Quill을 활용하여 게시판 만들기(with TypeScript)

https://stackoverflow.com/questions/60458247/how-to-access-reactquill-ref-when-using-dynamic-import-in-nextjs

How to access ReactQuill Ref when using dynamic import in NextJS?