[react-dnd] 드래그앤드랍 시 최신 state를 가져오지 못하는 버그

배경

react-dnd는 drag 시작 시에 item의 최신 상태는 잘 추적하지만, drop시에는 최신 상태를 추적하지 못한다.

이로 인해, 다음과 같은 코드를 작동하면 버그가 발생한다.

1. 상태 초기화

2. 상태 업데이트

3. 드랍 시 업데이트된 상태를 바탕으로 상태 업데이트 코드 실행

4. 버그 발생

즉, 드랍 전 상태를 업데이트 한 후 드랍했을 때 최신 상태를 바탕으로 다시 상태를 업데이트 하는 코드가 있다면 버그를 발생시킨다.

(필자는 업데이트했던 상태가 이전 상태로 초기화되는 버그를 경험했다.) 

따라서, drop 내 콜백 함수 에서는 직접 최신 상태를 추적해야 한다.

 

예시 코드

  // hooks
  const [{ isOver }, drop] = useDrop(() => ({
    accept: "BOX",
    drop: async (card?: CardType) => {
      if (!card) return;

      // 스토어에서 최신 상태값 가져오기
      const latestCard = useKanbanBoardStore.getState().cards.find((c) => c.id === card.id) || card;
      // 최신 상태값을 바탕으로 상태 업데이트
      await useKanbanBoardStore.getState().editCard(card.id, { ...latestCard, columnName });
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  }));