[hello-pangea/dnd] draggable id 관련 에러 해결 방법

`hello-pangea/dnd`는 `react-beautiful-dnd` 기반으로 만들어져있어 둘 다 공통되는 해결 방법일 수 있다.

 

hello-pangea/dnd  라이브러리 이용 시 에러

Next.js 14 에서 dnd 라이브러리 사용 시 에러 상황이다.

development 환경에서 체크했고 데이터들은 mock data, id는 nanoid를 이용했다.

 

핫 리로드 또는 라우터 이동 시에는 문제가 없는데 페이지를 직접 새로고침 할 때 아래와 같은 에러가 떴다.

Unable to find drag handle with id "UqjqGKqFhpsZoX7vZ3kOY" as no handle with a matching id was found

 

A setup problem was encountered.> Invariant failed: Draggable[id: rodb2RnnLDCbBO3uXRqlp]: Unable to find drag handle

 

Warning: Prop 'data-rfd-draggable-id' did not match. Server: "ha4Rtp_YZVuDwnEwFGvW0" Client: "kJsOV7wGnTNL8raMPN26L"

 

클라이언트와 서버 간의 data id 가 맞지 않아 문제가 생긴 듯 하다.

 

StrcitMode 끄기

React 환경의 StrictMode는 DOM 검사로 인해 렌더링이 한 번 더 일어난다.

다른 라이브러리와 충돌할 수도 있기에 끄는 방법도 해결책이 될 수 있다.

 

`next.js`에서는 다음과 같이 끌 수 있다. 

// next.config.js
const nextConfig = {
	reactStrictMode: false
};

export default nextConfig;

 

useEffect 이용하기

렌더링 되기 전 계산 할 때 에러가 생기는 시점이다.

렌더링 된 후에 useEffect를 이용해 컴포넌트를 내보내면 되지 않을까?

// DndComponent.tsx

  const [domReady, setDomReady] = useState(false);

  useEffect(() => {
    setDomReady(true);
  }, []);
  
  return (
  	{domReady ? <DragDropContext> ... <DragDropContext /> : <Skeleton />}
  )

 

`useEffect` 보다 `useLayoutEffect`를 적용해 볼 수도 있다.

의도적으로 느리게 테스트했는데 gif가 프레임이 부족해서 잘 안보인다... ㅠㅠ

 

`useEffect`는 HTML의 껍데기만 있는 상황에서 크기와 색상을 입히는 reflow, paint 단계(브라우저가 화면을 그리는 단계)의 과정을 빠르게 보여주면서 지나갈 것이다.
따라서 사용자 입장에선 화면이 깜빡이거나 크기가 바뀌는 상황을 보게 되어 어색할 수 있다.

 

`useLayoutEffect`는 렌더 트리 이후 effect를 실행시켜 reflow, paint 이후 스타일이 완성된 상태를 보여준다.

 

하지만, 이 훅은 동기적이어서 state가 바뀔 때마다 화면을 그때그때 그리는 게 아니라 차단시키기 때문에 리소스가 많을 경우 화면이 멈춘 것처럼 보이는 상황이 일어날 수 있으므로 적절히 잘 쓰도록 하자.

 

마무리

dnd 라이브러리를 쓰지 않고 Javascript로 직접 만들어보는 방법.

id가 문제라서 nanoid가 아닌 직접 값을 넣거나 값을 불러오는 위치를 의도적으로 변경해 에러를 해결할 수도 있다.

React 18 버전 이후부터는 버그가 있을 수도 있다고 하니 17 이하의 버전으로 다운그레이드 해보는 방법도 있다.

 

React는 가상 DOM과 비교하는 것 때문인지 새로고침을 하면 항상 문제가 생긴다...

단순히 개발환경에서의 버그일 수 있으나 콘솔 창에 뜨는건 찜찜하니 찾아서 해결해보았다.

 

참고

https://react-ko.dev/reference/react/useLayoutEffect

https://www.appsloveworld.com/reactjs/100/9/react-beautiful-dnd-i-get-unable-to-find-draggable-with-id-1