React Beautiful DnD는 Atlassian의 액세스 가능한 드래그 앤 드롭 라이브러리 입니다.

Github 문서 참고1

Github 문서 참고2

설치

$ npm i react-beautiful-dnd
or
$ yarn add react-beautiful-dnd

DragDropContext

import { DragDropContext } from 'react-beautiful-dnd';

DragDropContext 는 앱에 라이브러리를 사용할 수 있는 기능을 제공합니다. 라이브러리가 이제 구성 요소 트리에 액세스 할 수 있는 React 의 Context API와 유사하게 작동합니다.

<DragDropContext>
  <ul className="characters">
  ...
</DragDropContext>

⚠️ 둘 이상의 태그에 끌어서 놓기를 추가하려는 경우 DragDropContext가 응용 프로그램의 루트와 같이 해당 항목을 모두 래핑하는지 확인해야 합니다. DragDropContext를 중첩할 수 없습니다.

DragDropContext Props

const onDragEnd = ({ draggableId, destination, source }: DropResult) => {
	...
};

<DragDropContext onDragEnd={onDragEnd}>
  <ul className="characters">
	...
</DragDropContext>

onDragEnd (require)

드래그 앤 드랍이 유효한 범위에서 드랍을 멈출 때마다 함수가 실행됩니다.

*DropResult 의 객체의 property를 사용하여 드래그 앤 드랍에 대한 상태를 업데이트 할 수 있습니다. ( 드래그 앤 드랍의 useState 상태 업데이트 )*