[React] react-beautiful-dnd로 컴포넌트 drag&drop 구현하기

프로젝트 과정 중 어드민 페이지를 담당하여 홈에 들어갈 배너를 업로드 하는 기능을 구현하였습니다.
기존에는 PC, Mobile 각 각 한 개의 배너만 업로드 가능하게 구현해두었는데, 운영사의 요청에 따라 많은 배너를 배치할 수 있도록 수정하는 과정에서 배너의 순서를 커스텀 할 수 있도록 했습니다.
ux를 고려하여 드래그 앤 드랍 방식으로 편하게 배너의 순서를 바꿀 수 있도록 react-beautiful-dnd 라이브러리를 활용하였습니다.

 

기존 배너 업로드 방식

pc, mobile 각 1개의 배너

기존에는 사진 영역 클릭 or 이미지 드래그 방식으로 배너 업로드가 구현되어 있었고,

pc, mobile 각각 한 개의 이미지만 업로드 할 수 있었습니다.

 

각 배너를 최대 10개까지 업로드 할 수 있도록 요청받아 새로 구현하게 되었습니다.

 

수정된 배너 업로드 방식

drag&drop으로 배너 순서 변경

새로운 페이지에서 PC와 Mobile 탭을 나누어 배너를 업데이트 할 수 있도록 설계하였습니다.

 

배너 추가 버튼을 클릭하면 os 이미지를 업로드 할 수 있고, 업로드 된 이미지는 배너 리스트에 추가됩니다.

 

추가된 이미지는 가장 뒤에 순서대로 쌓이게 구현되어 있으며, 순서는 배너를 잡아 드래그하여 변경할 수 있습니다.

 

이 과정에서 컴포넌트의 순서를 바꾸기 위해 사용한 라이브러리가 react-beautiful-dnd 입니다.

React-Beautiful-DnD

들어가기에 앞서 react에서 가장 많이 사용된다고 알고 있는 3가지 라이브러리를 비교해봤습다.

react-draggable, react-dnd, react-beautiful-dnd로 최근에는 다운로드 수가 비슷한 동향을 보이는 것 같습니다.

 

react-draggable은 컴포넌트의 위치를 드래그하여 변경하는 것을 가능하게 해주며,

 

주로 컴포넌트의 순서를 바꾸기 위해서는 react-dnd와 react-beautiful-dnd를 많이 사용합니다.

 

react-dnd가 자유도가 높아 커스터마이징이 쉽기 때문에 조금 더 복잡한 구현을 할 경우라면 이 라이브러리를 사용했겠지만, 이번 프로젝트에서는 단순히 리스트의 순서만 변경하는 작업만 필요하기 때문에 react-beautifil-dnd를 사용했습니다.

 

react-beautifil-dnd는 조금 더 자연스러운 애니메이션과 위치에 대한 파라미터가 기본적으로 제공되기 때문에 더 적합하다고 생각되었습니다.

 

설치

사용하는 패키지 매니저에 맞게 라이브러리를 설치해줍니다.

# yarn
yarn add react-beautiful-dnd

# npm
npm install react-beautiful-dnd --save

컴포넌트 렌더링

드래그 앤 드랍이 가능한 영역과 컴포넌트를 지정하기 위해 react-beautiful-dnd에서 제공하는 API가필요합니다.

DragDropContext

 

... 글이 어디갔지

 

 

 

 

Beautiful and Accessible Drag and Drop with react-beautiful-dnd