React Beautiful Dnd

react beautiful dnd

React로 list를 만들기 위한 아름답고 접근 가능한 드래그 앤 드롭

Using innerRef
(Draggable과 Droppable컴포넌트의 내부 props정의)
< Draggable /> 및 < Droppable /> 컴포넌트 모두 HTMLElement를 제공해야 합니다. 이것은 DraggableProvided 및 DroppableProvided 객체의 innerRef 속성을 사용하여 수행됩니다.
url: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md#using-innerref

dragHandleProps
특정 영역을 통해서만 드래그를 가능하도록 하고 싶을 때 사용한다.
ex) {...provided.dragHandleProps}

DragDropContext
url: https://github.com/atlassian/react-beautiful-dnd/blob/HEAD/docs/api/drag-drop-context.md

Droppable
url: https://github.com/atlassian/react-beautiful-dnd/blob/HEAD/docs/api/droppable.md

Draggable
url: https://github.com/atlassian/react-beautiful-dnd/blob/HEAD/docs/api/draggable.md

provided
url:
https://github.com/atlassian/react-beautiful-dnd/blob/HEAD/docs/api/droppable.md#1-provided-droppableprovided