DndContext, useDraggable, useDroppable

dnd-kit의 모든 끌어서 놓기 기능은 DndContext 컴포넌트로 감싸야 합니다. DndContext는 조정 허브로서 활성 드래그를 추적하고, 드래그 가능 요소와 드롭 가능 요소 간에 정보를 전달하며, 이벤트 콜백을 실행합니다. 일반적으로 드래그 상태를 관리하는 컴포넌트 수준에 배치합니다.

useDraggable({ id }) 훅은 컴포넌트를 드래그 가능하게 만듭니다. 네 가지 핵심 값을 반환합니다. attributes(요소에 전달할 ARIA 속성), listeners(드래그 시작을 위한 이벤트 처리기), setNodeRef(드래그 가능한 요소의 참조 연결), transform(현재 변환을 {x, y, scaleX, scaleY}로 나타낸 값)입니다.

드래그 가능한 요소를 연결하려면 요소에 attributes와 listeners를 펼쳐 적용하고, setNodeRef를 ref 속성으로 전달합니다. attributes에는 role="button", tabIndex, ARIA 속성이 포함됩니다. listeners는 dnd-kit이 드래그 시작을 감지하는 데 필요한 포인터 및 키보드 이벤트 처리기를 연결합니다.

useDraggable의 transform 값은 드래그하지 않을 때 null이고, 드래그 중에는 좌표 객체입니다. @dnd-kit/utilities 패키지의 CSS.Translate.toString(transform)을 사용하여 CSS 문자열로 변환합니다. 이 값을 드래그 가능한 요소의 transform CSS 속성으로 적용하면 요소가 시각적으로 커서를 따라갑니다.

useDroppable({ id }) 훅은 컨테이너를 유효한 드롭 대상으로 지정합니다. isOver(드래그 가능한 요소가 이 드롭 가능 영역 위에 있는 동안 true인 불리언 값)와 드롭 가능 요소에 참조를 연결하는 setNodeRef를 반환합니다. useDraggable과 달리 펼쳐 적용할 이벤트 리스너는 없습니다.

useDroppable의 isOver 값으로 드래그 중 시각적 피드백을 제공할 수 있습니다. isOver가 true이면 드롭 가능 영역에 강조 색상, 테두리 또는 배경 변경을 적용할 수 있습니다. 이는 사용자가 항목을 놓을 수 있는 위치를 이해하도록 도와주며, 사용성과 접근성에 매우 중요합니다.

DndContext의 onDragEnd 콜백은 두 가지 중요한 속성을 가진 이벤트 객체를 받습니다. event.active에는 드래그된 항목(id 포함)이 들어 있고, event.over에는 드롭 대상이 들어 있습니다. 어떤 드롭 가능 영역 바깥에 놓은 경우에는 null입니다. 이 ID를 사용하여 애플리케이션 상태를 업데이트합니다.

onDragEnd에서 event.over가 null이 아님을 확인한 다음, 이동을 반영하도록 상태를 업데이트합니다. 예를 들어 칸반 보드에서 열 사이로 카드를 옮긴다면 원본 열에서 카드를 제거하고 event.over.id로 식별되는 대상 열에 추가합니다.

DragOverlay는 커서를 따라가는 드래그 중인 항목의 떠 있는 미리 보기를 렌더링합니다. 일반 DOM 트리 바깥에 포털로 렌더링되므로, 넘치는 내용이 숨겨지도록 설정된 컨테이너에 의해 절대 잘리지 않습니다. 원본 요소와 달리 오버레이에는 드롭 그림자, 크기 조정 변환 또는 회전 효과를 적용하여 항목이 드래그 중임을 나타낼 수 있습니다.

실제 드래그 앤 드롭 UI는 DndContext, 여러 개의 useDraggable 요소, 여러 개의 useDroppable 영역, 그리고 각 항목의 위치를 추적하는 상태 관리를 함께 사용합니다. 핵심은 드래그 앤 드롭 키트가 동작 원리를 제공할 뿐이며, onDragEnd에서 상태를 업데이트하고 새로운 배치를 반영하도록 UI를 다시 렌더링하는 것은 개발자의 역할이라는 점입니다.

useDraggable의 transform 객체를 CSS 변환 문자열로 변환하는 유틸리티는 무엇입니까?

DndContext는 드래그 앤 드롭 키트의 모든 드래그 작업을 조정하는 중심입니다. useDraggable은 드래그 가능한 요소에 속성, 리스너, setNodeRef 및 transform을 제공합니다. useDroppable은 놓기 대상에 isOver와 setNodeRef를 제공합니다. onDragEnd에서는 상태를 업데이트하는 데 필요한 활성 항목의 ID와 대상 항목의 ID를 얻을 수 있습니다. DragOverlay는 포털을 기반으로 떠 있는 미리 보기를 렌더링합니다.