문제상황

프로젝트에 quill 에디터를 적용하였다. 그런데 toolbar가 중복되어 렌더링되는 현상이 일어났다.

해결시도

.quill > .ql-toolbar:first-child {
display: none !important;
}
툴바의 첫번째 자식 요소 선택자를 통해 툴바하나를 안보이게 하려하였다. (실패)

정답

useEffect 훅이 보안상의 이유로 두번 렌더링되는것이 문제였다. 그래서 그것을 해결하고자 index.tsx파일에 strictmode 컴포넌트를 삭제후 컴파일 하였더니 해결되었다.
그렇다고 개발하는 도중에 계속 strictmode를 삭제후 개발할것은 당연히 아니다.(타입스크립트를 사용할것이니.) 어차피 이 문제는 개발시에만 문제가될것이고 배포시에는 문제가 되지않을것이기에 strictmode를 그대로두고 개발할 예정이다.

.
.
.
.
.
.
.
.

.
.
2023년 9월 17일. 다른해결방법을 찾았다.

• 순수한 quill을 쓰지말고 react-quill을 사용했더니 자동으로 해결됨(quill 사진업로드 관련해서 문제가 터져서 해결도중 순수한 quill을 react-quill로 교환함)