Trello Clone Coding #3

21 Nov 2023

Reading time ~2 minutes

Trello Clone Coding #3

시작하기 앞서

이전 포스팅에 이어 이번 포스팅에서는 다시 object의 item들을 옮기는 작업을 다시 해주도록 하겠다.
더 나아가 같은 Board에서 뿐 아니라 다른 Board로의 이동도 같이 해 볼 생각이다.

프로젝트 목표

enter image description here

react-beautiful-dnd 에 나와있는 trello이다.

이전 포스팅에서의 부족한점

앞서 말한 대로 Board item의 재배열과 간단한 styled작업을 추가로 해주도록 하겠다.
Board에서 다른 Board로 item을 옮기는 작업까지 같이 해주도록 하겠다.

이전 포스팅인 react-beautiful-dnd 사용하기

react-beautiful-dnd 사용하기 – 최정재 (flen-e.github.io)

를 통해서 다시 복습을 한 후 보기를 바란다.

기본적인 구조로 DragDropContext와 Droppable, Draggable이 존재하는데,
DragDropContext에서 필수적으로 필요로 하는 prop인 onDragEnd는 자식 컴포넌트와 드래그를 끝낸 시점에서 불려지는 함수를 뜻한다.

복습

onDragEnd에 원하는 함수를 넣으면 드래그 드랍에 할 때 이용할 함수를 넣어 줄 수 있다는 뜻이다.

const onDragEnd = (info : DropResult) =>{
    console.log(info);
};

복습하는 셈 치고 다시 한번 더 연습해보도록 하자.

enter image description here

현재 우리가 만든 trello 이다
여기서 “Doing”에 있는 item c를 “To Do”의 item a밑으로 보내보도록 하자

enter image description here

우린 DropResult info를 출력 해보았다.
여기서 알 수 있듯이 출발지인 source에서 droppableId가 “Doing”인 곳에서 index가 0이였던 item c를 가리키고,
목적지인 destination에서 droppableId가 “To Do”인 index가 1번째 자리인 곳을 가리키고 있음을 알 수 있다.
그곳에 draggableId인 c가 가려했다는 것을 얻을 수 있다.
이제 info에 담긴 정보를 알아보았으니 해당 정보를 이용해주기만 하면 해결된다.

item 옮기는 것을 해결해보자

우리에게 필요한 정보는 destination, draggableId, source가 있다.

const {destination, draggableId, source} = info;

원하는 정보를 info에서 가져오도록 한다.
그리고 3개의 절차로 나누어 코드를 짜보도록 하자.
처음에는 목적지가 없을 때는 변화가 없어야 한다.

if(!destination) return; <br>

두번째로는 같은 보드에서의 이동이다.
이는 지난 react-beautiful-dnd포스팅에서 다루었지만
다른 점이 있다면 이제 바로 배열을 가져오는 것이 아닌
어떤 보드인지 알고 해당 보드 배열을 가져올 것이다.

if(destination?.droppableId === source.droppableId){
    //same board movement.
    setToDos((allBoards) =>{
	    const boardCopy = [...allBoards[source.droppableId]];
	});
}

먼저 boardCopy에 해당 Board를 가져온 다음 이전과 같은 방식으로 source.index를 자르고 원하는 위치(destination.index)에 넣어 준 후 리턴해주는 방식이다.
리턴은 한 보드만 바뀌었으니 …allBoards 와
“Doing” 보드에서 바뀌었으면 “Doing” : boardCopy형식이 되면 되니,
[source.droppableId] : boardCopy를 리턴해주면 된다.

세번째는 다른 보드로의 이동인데 이는 위에 문제에 목적지만 더 생각해주면 되는 방식이다.

똑같이 sourceBoard를 받아오고 그다음 destinationBoard를 받아온다.
sourceBoard는 해당 index를 잘라주고 destinationBoard에 해당 draggableId를 넣어주고 두 Board를 return해주면 해결된다.

마무리

enter image description here

위에 내용을 잘 따라 하였다면 지금과 같이 Board간에 item들이 서로 이동을 잘 되는 것을 확인 할 수 있다.

trello