기능 구현 - Drag & Drop

치맨·2024년 4월 28일

기능구현

목록 보기

9/9

react-beautiful-dnd

react-beautiful-dnd 라이브러리를 사용해서 Drag & Drop 기능을 구현해봤습니다.
Drag & Drop을 사용한 이유 : 우선 프로젝트 기획 단계에서 웹서비스 특성상 장소를 선택하고, 선택한 장소의 순서가 중요하기 때문에 Drag & Drop이 없더라면 순서를 맞추기 위해서 추가, 제거를 반복하는 과정이 불편하다고 생각했기 때문에 Drag & Drop을 도입하게 되었습니다.
라이브러리를 사용한 이유 : 저는 최대한 구현할 수 있으면 라이브러리를 사용하지 않고 직접 구현하는 것이 좋다고 생각합니다. 하지만 정해진 기한 내에 직접 구현하는 것보다 라이브러리를 사용하는 것이 가독성과 최적화, 개발 생산성 측면에서 더 좋을 것 같다고 생각하여 도입하게 되었습니다.
react-beautiful-dnd를 사용한 이유 :
1. 이전에 노마드코더에서 강의를 들을 때 한번 클론코딩으로 사용해봤었기에 비교적 쉽게 이해하고, 사용할 수 있기 때문에 사용했습니다.
2. react-beautiful-dnd에 나와있듯이 설명이 너무 잘 되어있어서 선택했습니다.
3. Atlassian에서 만든 React DND 라이브러리이기 때문에 큰 문제가 없다고 생각했습니다.
  4. 용량, 버전관리 등 더욱 고려할 부분이 많겠지만 우선 현재 프로젝트에선 문제가 되지 않았기에 사용했습니다. 아래의 사진과 같이 많은 사람들이 사용하고 있으니 괜찮지 않을까 합니다.

공식 github를 통해 사용하는 방법 알아보기

우선 공식 github로 접속합니다. react-beautiful-dnd
마침 한국어로 번역해주신 분께 있어서 여기로 접속합니다(감사합니다). react-beautiful-dnd-kr

1. 우선 설치를 합니다.

npm install react-beautiful-dnd --save

--save 옵션은 package.json의 dependencies에 모듈을 추가한다는 의미입니다.
하지만 npm5 버전 이후에는 옵션을 쓰지 않아도 자동으로 추가 됩니다.

2. 사용하기 전에 알아둘 정보가 있습니다.

2-1. DragDropContext : Drag & Drop을 사용할 context를 설정합니다. 
2-2. Droppable : drop을 할 공간을 설정합니다.(DragDropContext 내부에 있어야 합니다.)
2-3. Draggable : drag를 할 요소를 설정합니다.(DragDropContext, Droppable 내부에 있어야 합니다.)

3. DragDropContext 사용법

우선 공식 github을 알아보겠습니다.

DragDropContext를 import합니다.
DragDropContext 컴포넌트를 만들고, onDragStart, onDragEnd라는 property를 사용합니다.
2-1. onDragStart : 드래그를 시작할때 처리를 하는 코드입니다.
2-2. onDragEnd : 드래그를 끝날때 처리를 하는 코드입니다.
DragDropContext 내부에서 원하는 방식으로 코드를 작성합니다.

4. Droppable 사용법

우선 공식 github을 알아보겠습니다.

Droppable를 import합니다.
Droppable 컴포넌트를 만들고, 3가지의 props를 사용합니다.
Droppable 내부에는 콜백형식{()=>}으로 코드를 구성하며, provied, snapshot 2가지의 argument를 사용할 수 있습니다.

5. Draggable 사용법

우선 공식 github을 알아보겠습니다.

Draggable import합니다.
Draggable 컴포넌트를 만들고, 3가지의 props를 사용합니다.
Draggable 내부에는 콜백형식{()=>}으로 코드를 구성하며, provied, snapshot 2가지의 argument를 사용할 수 있습니다.
provied, snapshot안에 사용된 것들은 공식문서에서 확인하시면 됩니다.한글번역된 github