📌 Beautiful DnD
설치 : npm i --save-dev @types/react-beautiful-dnd
복잡한 드래그 앤 드롭 인터페이스를 쉽게 구현할 수 있습니다.
- DragDropContext
Drag and Drop이 일어나는 전체영역으로 Draggable과 Droppable 컴포넌트는 반드시 이 컨텍스트 내부에 존재해야 합니다. DragDropContext는 onDragEnd라는 콜백을 필요로 하는데, 이 콜백은 드래그 작업이 끝났을 때 호출되며, 여기서 애플리케이션의 상태를 업데이트할 수 있습니다.
- Droppable
드래그 가능한 항목이 놓일 수 있는 영역을 정의합니다. 각 Droppable은 고유한 droppableId를 가지고 있어야 하며, Draggable 항목들을 자식을 가집니다.
- Draggable
드래그될 수 있는 항목을 정의합니다. 각 Draggable도 고유한 draggableId를 가져야 하며, 이는 Droppable 영역에서 위치를 추적하는 데 사용됩니다.
DropResult
DragDropContext의 onDragEnd 함수는 사용자가 드래그한 아이템을 놓았을 때 호출됩니다.
1. 객체에 포함된 속성
draggableId: 드래그한 컴포넌트의 고유한 id입니다.
type: 드롭 가능한 컴포넌트의 타입을 나타냅니다.
source: 아이템이 드래그를 시작한 위치를 나타내는 객체입니다. 이 객체는 index(위치의 인덱스)와 droppableId(드롭 가능한 컴포넌트의 id)를 포함합니다.
reason: 드래그가 완료된 이유를 나타냅니다. (DROP, CANCEL 등)
destination: 아이템이 드래그를 끝낸 위치를 나타내는 객체입니다. 이 객체 역시 index와 droppableId를 포함합니다. 만약 아이템이 드롭 가능한 영역 바깥으로 이동했다면 이 값은 null이 됩니다.
이 정보를 이용하여, 드래그 앤 드롭 후의 애플리케이션의 상태를 업데이트할 수 있습니다. 예를 들어, source와 destination의 정보를 이용하여 배열의 아이템 순서를 바꾸는 등의 동작을 구현할 수 있습니다.
DroppableStateSnapshot
Droppable의 provided.placeholder prop에 제공되는 객체의 속성으로 시각적인 피드백을 제공합니다.
1. 객체에 포함된 속성
isDraggingOver : 사용자가 드래그 중인 항목이 현재 Droppable 영역 위에 있을 경우 이 값은 true가 됩니다. 이 정보는 드롭 타겟의 시각적 피드백을 제공하는 데 사용될 수 있습니다. 예를 들어, 항목이 드롭될 위치를 강조 표시하는 등의 스타일링을 적용할 수 있습니다.
draggingOverWith : 이 속성은 현재 드래그 중인 Draggable의 id를 반환합니다. 만약 드래그 중인 요소가 Droppable 영역 위에 없다면 이 값은 null이 됩니다. 이를 통해 어떤 요소가 Droppable 영역 위에 있는지 파악할 수 있습니다.
draggingFromThisWith : 드래그 작업이 이 Droppable에서 시작되었을 경우 현재 드래그 중인 Draggable의 id를 반환합니다. 드래그가 이 Droppable에서 시작되지 않았다면 이 값은 null이 됩니다. 이를 통해 드래그가 시작된 원본 위치에 시각적 표시를 추가하는 등의 스타일링을 적용할 수 있습니다.
isUsingPlaceholder : 이는 불리언 값으로, Droppable이 현재 placeholder를(End지점 사이즈 조절 유지) 사용하고 있는지 나타냅니다. Draggable 요소가 Droppable 위로 드래그되면 Droppable은 placeholder를 사용하여 드롭될 공간을 보여줍니다.
DraggableStateSnapshot
현재 드래그 중인 요소의 상태에 대한 정보를 제공하는 객체입니다.
1. 객체에 포함된 속성
isDragging : 현재 요소가 드래그 중인지를 불리언 값으로 나타냅니다. 요소가 드래그 중이면 true를 반환하고, 그렇지 않으면 false를 반환합니다. 이 속성을 사용하여 드래그 중인 요소에 대한 시각적 표현을 변경할 수 있습니다. 예를 들어, CSS 클래스를 추가하거나 제거하여 드래그 중인 요소의 스타일을 바꿀 수 있습니다.
draggingOver : 드래그 중인 요소가 어떤 Droppable 위에 있다면, 그 Droppable의 Id를 반환합니다. 드래그 중인 요소가 어떤 Droppable 위에도 없다면, null을 반환합니다. 이 속성을 사용하여 어떤 Droppable 위에 드래그 중인 요소가 있는지 확인하고, 그에 따라 시각적 피드백을 제공할 수 있습니다.
이러한 속성들은 Draggable 컴포넌트의 자식 함수로 전달되는 snapshot 매개변수를 통해 사용할 수 있습니다. 이 매개변수를 사용하여 드래그 중인 요소에 대한 동적 스타일링을 적용하거나, 드래그 이벤트에 따른 사용자 경험을 향상시킬 수 있습니다.
