[react-beautiful-dnd] 칸반보드 만들기, react-beautiful-dnd 상세설명

노마드 코더 강의를 들으며 react-beautiful-dnd 라이브러리를 이용하여 칸반보드를 만들었다!

간단한 메모기능이 있고 메모를 다른 칸반보드로 옮길 수 있다.

추후 로컬스토리지에 저장 및 로드 기능, 삭제기능, 칸반보드 생성 기능도 추가할 것이다!!

 

이 게시물에는 칸반보드를 만들면서 알게 된 react-beautiful-dnd에 대해 정리해보려고 한다. 

react-beautiful-dnd

npm i react-beautiful-dnd

npm i --save-dev @types/react-beautiful-dnd // 타입스크립트라면 install 필요!

DragDropContext

드래그 앤 드롭을 가능하게 하고 싶은 앱의 한 부분이다.
<필수요소>
- onDragEnd 함수 : 유저가 드래그를 끝낸 시점에 불려지는 함수이다.
- children : children으로 <div> 같은 tag들이 있어야 한다.

Droppable

어떤 것을 드롭할 수 있는 영역이다.

<필수요소>

- droppableld prop : 유저가 드롭할 수 있는 영역이 여러 개 일 수도 있기 때문에 필요한 요소이다.

- children : { ( ) ⇒ (<ul> </ul>) }

<argument>

provided : innerRef, placeholder, droppableProps를 가지고 있다.

export interface DroppableProvided {
    innerRef: (element: HTMLElement | null) => void;
    placeholder: React.ReactNode;
    droppableProps: DroppableProvidedProps;
}

placeholder는 
Draggable 엘리먼트를 드래그하는 동안 position: fixed(영역을 고정시킴)를 적용한다
Draggable을 드래그할 때 Droppable 리스트가 작아지는 것을 방지하기 위해 필요하다.

Draggable

드래그할 수 있는 영역이다. (리스트에 있는 아이템들)

<필수요소>

- droppableld prop

- index prop

- children : { ( ) ⇒ (<li> </li>) }

<argument>

provided: innerRef, draggableProps, dragHandleProps를 가지고 있다.

export interface DraggableProvided {
    // will be removed after move to react 16
    innerRef: (element: HTMLElement | null) => void;
    draggableProps: DraggableProvidedDraggableProps;
    dragHandleProps: DraggableProvidedDragHandleProps | null | undefined;
}

draggableProps는 요소 전체를 드래그하는 것을 의미한다.
만약 요소가 기본적으로 드래그되길 원한다면 draggableProps를 하면 된다.

dragHandleProps는 원하는 곳 어디에서든지 드래그 가능하지만(센터든 코너든) 때로는 원하지 않을 때 사용한다.
즉, 움직일 수 있는 특정한 부분 만들고 싶을 때 dragHandleProps를 원하는 부분에 넣으면 된다.

---

회사에서 trello로 팀원들과 진행상황을 공유하면서

어떤 원리로 이런 동작이 가능한지 궁금했고 드로그 앤 드롭 기능을 알고 싶었다. 

그래서 이번에 드로그 앤 드롭 기능을 구현하면서 하는 내내 재밌고 신기했다.

 

물론! 간단한 기능은 아니었다고 생각한다.

아이템 정렬을 위한 splice 메서드, 객체 깊은 복사, 최적화를 위한 React.memo 등

여러 개념이 합쳐져서 칸반보드가 구현되기 때문이다.

 

나는 이 복잡한 개념들 속에서 드로그 앤 드롭 기능을 구현하며 중간에 길을 잃기 않기 위해

대충 넘어가지 않고 하나하나 이해하기 위해 노력했고 이에 끝까지 구현할 수 있던 것 같다.

뿌듯하다!!!!

 

스타일, 로컬스토리지 저장, 삭제 등 더 많은 기능을 추가하여 보완해서

내 친구들 가족들에게 이 칸반보드를 선물할 것이다 : )