react-quill

당신이 설명한 이슈를 구체적으로 파악하기 위해서는 코드 스니펫을 봐야할 것 같습니다. 그러나, React-quill과 react-hook-form이 충돌하는 문제일 수 있습니다. 일반적으로, Quill의 경우에는 controlled component를 지원하지 않으므로, React Hook Form에서 제어하는 것은 어렵습니다. 대신, useRef hook와 useEffect hook를 사용하여 Quill의 인스턴스에 대한 참조를 만들고 업데이트를 직접 처리하는 것을 고려해볼 수 있습니다. 아래는 적용 방법의 예시입니다. ```jsx import ReactQuill from "react-quill"; import { useForm, useController } from "react-hook-form"; import { useCallback, useEffect, useRef } from 'react'; function QuillInput({ control }) { const { field } = useController({ name: 'description', control, defaultValue: '', }); const quillRef = useRef(); // Create a Ref const handleChange = useCallback((content, _, __, editor) => { onChange(content); }, [onChange]); useEffect(() => { if (quillRef.current) { quillRef.current.getEditor().setContents(field.value); } }, [field.value]); return ( <ReactQuill ref={quillRef} onChange={handleChange} /> ); } // Usage export default function App() { const { handleSubmit, control } = useForm(); return ( <form onSubmit={handleSubmit(data => console.log(data))}> <QuillInput control={control} /> <button>Submit</button> </form> ); } ``` 이 코드는 React-hook-form에 의해 관리되지 않는 quill 에디터 인스턴스를 만들고, 값을 직접 업데이트합니다. 이 방법은 react-quill과 react-hook-form 사이의 충돌을 방지하여 문제를 해결할 수 있습니다.