[경험] React에서 Quill 입력시 입력 오류 해결

Next.js에서 Quill 에디터를 사용하는 방법을 다른 게시글로 올렸습니다. 필요하시다면 해당 글이 도움되실 겁니다.

문제 발생

개인 프로젝트로서 개발중에 위지윅 에디터가 필요했다. 여러 에디터들을 비교해보니 Quill 에디터가 괜찮아 보였고, Next.js로 만든 페이지 위에서 사용하고자 하였다. 그래서 찾다보니 Quill 에디터를 React에 적용하는 코드까지 올려주신 감사한 분(해당 글은 삭제됨)이 있었고, 이를 활용하여 정상적으로 에디터를 띄울 수 있었다.

문제 발생

그런데, 위 사진과 같이 영문과 한글 모두 첫 글자를 입력하게 되면 커서가 맨 앞으로 가버리는 문제가 있었다.

처음에는 직접 Quill의 develop 브랜치를 컴파일해서 불러온거라 문제가 발생한 줄 알았다. 그래서 Quill의 소스코드만 계속해서 보았다. 그런데 알고보니 문제는 얕은 곳에 있었다.

const mounted = useRef(false);
useEffect(() => {
    if (contents === "" || mounted.current) {
        return;
    }
    mounted.current = true;
    quillInstance.current.root.innerHTML = contents;
}, [contents]);

에디터의 innerHTML을 초기 값을 설정해주는 useEffect Hook이 있는데 이것이 문제였다.

초기 값이 있으면 처음에 mounted가 true로 설정

초기 값이 없으면 첫 글자를 입력한 후 mounted가 true로 설정

초기 값이 있을 경우에는 정상적으로 innerHTML이 설정된 후 mounted가 true로 변하지만, 초기 값이 없으면 contents === "" 조건으로 인해 처음 함수 실행시 리턴되고, mounted는 false 상태로 유지된다. 그 상태에서 첫 글자를 입력하면 mounted가 true로 변하면서, innerHTML이 설정되기에 커서가 앞으로 이동한 것이다.

문제 해결

useEffect(() => {
    ...
    quillInstance.current = new window.Quill(quillElement.current, {
    ...
    // contents mount (Edited)
    if (contents) {
        quillInstance.current.root.innerHTML = contents;
    }

    const quill = quillInstance.current;
    ...
}, []);

위 문제를 해결하기 위해서는, 초기 값이 빈 문자열이어도 mounted가 true가 되도록 수정해주면 되었다. 하지만 해당 useEffect를 유지하기 보다는 없애버리고, 똑같은 기능을 하는 코드로 간소화하였다. 해당 함수의 역할은 초기 값을 불러오는 것 뿐이었기에, 위의 코드와 같이 Quill 인스턴스를 만드는 useEffect에서 처음에 contents가 있으면 innerHTML을 설정해주도록 하는 세 줄의 코드를 넣어준 것이다.

결과

이를 통해 문제는 잘 해결되었다.

이 과정에서 깊은 곳(Quill의 소스코드)보다는 얕은 곳(React 컴포넌트)을 먼저 살펴보았으면 문제를 더 빨리 해결할 수 있었겠다고, 또 다른 사람의 코드라고 무조건 신뢰하기 보다는 유심히 살펴볼 필요가 있음을 느꼈다.

 

도움이 된 자료

[번역] useEffect 완벽 가이드