Beautiful dnd 드래그 기능 구현 중 오류(Cannot find droppable entry with id [droppable] at handleError)(React + TypeScript)

React + TypeScript로 드래그 기능을 구현하기 위해 코드를 짰는데, 위와 같은 오류가 나왔다.
이리저리 코드를 고쳐봤는데도 계속 같은 오류가 나와서, 인터넷에 검색해본 결과, 맥이 풀릴 정도로 손쉬운 해결법이 있었다.

index.tsx 파일을 열어보면,

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
    
);

이렇게 되어 있을텐데, 여기에서 <React.StrictMode></React.StrictMode> 를 제거해주면 문제가 해결된다.
React 18 이상에서 나타나는 문제로, 17이하로 다운그레이드하거나, React.StrictMode를 제거해주면 된다.

관련 링크: Invariant failed: Cannot find droppable entry with id [...] · Issue #2396 · atlassian/react-beautiful-dnd (github.com)

위 링크에 의하면, 리액트가 StrictMode 에서 useEffect를 두 번 실행하면서 발생하는 문제라고 한다.

---

그러면 React.StrictMode가 무엇인가?

React.StrictMode는 React 애플리케이션을 개발할 때 도움 되는 도구인데, 개발 모드에서만 활성화되고 프로덕션 모드에서는 무시된다.
Strict 모드를 활성화하면 개발 관련 경고와 검사를 수행해서 개발자에게 잠재적인 문제를 빨리 발견하도록 도와준다고 한다.
(side effects의 두 번 호출, 예상하지 않은 컴포넌트 업데이트, 컴포넌트 렌더링 두 번 이상 발생 경고) 등
이외에도 최적화 관련해서 컴포넌트의 렌더링 횟수를 추적한다고 하니, 유용한 도구라 할 수 있다.
(프로덕션 환경에서는 무시되므로 성능에 영향을 미치지도 않는다)

---

그래서 드래그 기능을 위해서 React.StrictMode를 포기하는 것도 뭔가 애매하다.
React.StrictMode를 사용하면서 드래그 기능도 쓸 수 있는 방법이 있을까 좀 더 검색해본 결과, React 18을 지원하고 TypeScript도 지원하는 @hello-pangea/dnd 라이브러리를 찾을 수 있었다.
오픈 소스를 포크해서 새로 만들었다고 한다.

@hello-pangea/dnd 깃허브: hello-pangea/dnd: Beautiful and accessible drag and drop for lists with React. (github.com)

위의 라이브러리로 React-Strictmode로 사용한 결과, 원래 떴던 에러가 사라지고 정상적으로 드래그가 되었다!

 

---

24년 1월 19일 작성된 글입니다