[React] react-quill 경고 메세지 해결 방법 - react18 / findDOMNode

---

 

■ react-quill 경고 메세지

■ 해결 방법

---

■ react-quill 경고 메세지

제 프로젝트 리액트 버전은 18이구요 !

아래 명령어로 react-quill을 설치하였습니다.

npm install react-quill

 

 

react-quill을 사용하니 아래와 같은 경고 문구가 계속 뜨더라구요.

 

react-quill이 내부적으로 findDOMNode()를 쓰고 있습니다.

여기서, findDOMNode는 특정 컴포넌트의 진짜 DOM 요소를 찾는 방식입니다.

 

음, React팀에서 곧 제거 예정인 방식이라 사용했을 때 아래와 같은 경고를 띄워줍니다. ㅜㅜ

Warning: findDOMNode is deprecated and will be removed in the next major release. 
Instead, add a ref directly to the element you want to reference. 
Learn more about using refs safely here: 
https://reactjs.org/link/strict-mode-find-node at ReactQuill2

---

■ 해결 방법

ChatGPT의 해결방법은

1. 무시해도 된다. 동작은 문제 없다 ~ 

2. react-quill@2.0.0-beta.4 버전을 설치하라!

였는데요.

 

저는 본 이상 무시는 못하겠고,

2번 방법을 선택해서 해봤습니다.

 

결과는... ...

동일한 경고 메세지가 뜨더군요  ㅎㅎ ( 지피티 바보 ㅠㅠ ) -> 해결 안됨 !!!! 

---

구글링을 해서 찾아낸 방법을 아래에 적어보겠습니다 !

두가지 방법을 찾았는데, 저는 2번의 방법으로 문제를 해결하였습니다.

 

https://codingdialee.tistory.com/100

[SSAFYcial] 신한 해커톤 React Editor 적용기

 

https://github.com/zenoamaro/react-quill/issues/972

---

1. ReactQuill에 직접 ref 연결해주기

import React, { useRef, useEffect } from 'react';
import ReactQuill from 'react-quill';

export default function CustomQuill({ value, onChange }) {
  const quillRef = useRef(null);

  useEffect(() => {
    if (quillRef.current) {
      // DOM 접근 가능
      console.log('Quill DOM node:', quillRef.current.editor);
    }
  }, []);

  return (
    <ReactQuill
      ref={quillRef}
      value={value}
      onChange={onChange}
      theme="snow"
    />
  );
}

---

2. 대체 라이브러리 설치

아래 포크 버전은 findDOMNode를 사용하지 않고 ref로만 작동하여, 최신 버전 리액트에서도 경고가 뜨지 않습니다!

사용법은 기존 react-quill가 같구요 👍🏻

npm install react-quill-new

import React, { useState } from 'react';
import ReactQuill from 'react-quill-new'; // 여기만 다름!
import 'react-quill-new/dist/quill.snow.css';

export default function MyEditor() {
  const [content, setContent] = useState('');

  return (
    <ReactQuill
      value={content}
      onChange={setContent}
      theme="snow"
    />
  );
}

---