[React] 다른 메모 보드로 메모 이동시키기

~ 지난 이야기 ~

이전의 코드는 하나의 메모보드 내부에서만 메모의 순서를 바꾸는 로직이었다.

atom.tsx

export const toDoState = atom({
  key: 'toDo',
  default: ['a', 'b','c', 'd','e'],
});

App.tsx

const [toDos, setToDos] = useRecoilState(toDoState);
const onDragEnd = ({ destination, draggableId, source }: DropResult) => {
	//destination 객체가 존재하지 않을 때 === card의 순서를 변경하지 않음 그대로 return
	if (!destination) return;
    
    setToDos((oldToDos) => {
      const copyToDos = [...oldToDos];
      //1. delete item on  source.index
      copyToDos.splice(source.index, 1);
      //2. put back the item on the destination.index
      copyToDos.splice(destination?.index, 0, draggableId);
      return copyToDos;
    });

setToDos()로 toDoState를 수정한다.
메모의 원래 위치에 대한 정보는 source객체에 담겨있고 이동시킨 위치에 대한 정보는 destination에 담겨있다.