Editor 컴포넌트에서 받아 오는 body 값은 Quill 에디터에서 내용을 입력할 때마다 변경됩니다. body가 변경될 때마다 방금 작성한 useEffect에 등록한 함수가 호출됩니다. 하지만 우리는 컴포넌트가 화면에 마운트되고 나서 단 한 번만 useEffect에 등록한 작업이 실행되도록 설정해 주어야 합니다. 따라서 useRef를 사용하여 mount 상태에 따라 작업을 처리하도록 설정했습니다.

물론 이 상황에서 useEffect의 두 번째 파라미터에 비어 있는 배열을 넣으면 해결될 수도 있습니다. 하지만 ESLint 규칙은 useEffect에서 사용하는 모든 외부 값을 두 번째 파라미터에 넣는 배열 안에 포함시킬 것을 권장하고 있으므로 이렇게 처리했습니다.

또 다른 방법으로 해당 줄만 ESLint 규칙을 비활성화할 수도 있습니다.

useEffect(() => {
  quillInstance.current.root.innerHTML = body;
}, []); /* eslint-disable-line */

취향에 따라 방법을 선택하면 됩니다.