Drag and Drop 기능 구현

1. HTML 드래그 앤 드롭 API 사용해 원하는 목록을 드래그 가능하게 생성

2. 사용자가 드래그를 할 때 적절한 애니메이션

3. 사용자가 드래그를 멈췄는지 확인. 이 순간에도 애니메이션

4. 클라이언트가 목록을 재정렬한 경우 항목의 위치를 새 항목으로 업데이트

react-beautiful-dnd 라이브러리

: 드래그앤 드롭 기능 쉽게 구현 가능하게 해주는 모듈

설치 명령어 => npm install react-beautiful-dnd --save

import

3가지 구성 요소

DragDropContext

드래그 앤 드롭을 활성화하려는 애플리케이션 부분을 래핑

Droppable

드롭할 수 있는 영역. 포함

Draggable

드래그 가능 영역

드래그 앤 드롭 사용

DragDropContext으로 드래그앤드롭 하려는 부분 래핑

드롭 가능한 영역 Droppable태그로 지정, 속성으로 id부여

데이터 객체 배열를 map메소드로 반환되어 생성되는 List 컴포넌트들을 Draggable 태그로 드래그 가능한 영역으로 적용

Draggable 속성으로는 각 객체의 id를 key로, id 데이터를 string으로 변환한 것을 draggableId로 index는 그대로 index로 지정

리스트 컴포넌트에는 생성되는 각 컴포넌트에 넣어야할 provided, snapshot 속성 추가 지정

드래그 이벤트 종료 시(onDragEnd) 이벤트 함수 handleEnd 호출

드래그 이벤트에 대한 데이터 객체를 result라는 인자로 받아 할당

새로 데이터 객체 선언 및 기존 데이터 객체 할당

변경시키는 아이템을 배열에서 splice 함수로 삭제 한 값을 리턴으로 reorderedItem에 할당

새로 생성한 데이터 객체에 드래그 함수로 목적지에 온 index기준 0번 째에 reorderedItem을 추가

새로 업데이트된 데이터 객체를 기존 데이터 객체에 업데이트