dnd-kit 아키텍처와 접근성 우선 설계

react-beautiful-dnd는 React에서 사용하던 대표적인 끌어서 놓기 라이브러리였지만, 2023년에 공식 보관 처리되어 더 이상 유지 관리되지 않습니다. 커뮤니티는 빠르게 dnd-kit을 권장 대체재로 받아들였으며, dnd-kit은 최신 React와 접근성을 고려해 처음부터 설계되었습니다.

dnd-kit은 세 가지 핵심 아키텍처 개념을 중심으로 구성됩니다. DndContext는 모든 드래그 상태를 관리하고 드래그 가능 요소와 드롭 가능 요소 간의 조정을 담당합니다. 센서는 입력 방식을 추상화하여 동일한 드래그 로직이 마우스, 터치, 키보드에서 작동하도록 하며, 수정자를 사용하면 드래그 이동을 맞추거나 제한하거나 변환할 수 있습니다.

dnd-kit은 세 가지 기본 센서를 제공합니다. PointerSensor는 통합 Pointer Events API를 통해 마우스와 터치 입력을 모두 처리합니다. KeyboardSensor는 키보드만으로 완전한 끌어서 놓기를 가능하게 합니다. TouchSensor는 기존 터치 이벤트를 처리합니다. DndContext의 sensors 속성을 통해 센서를 구성합니다.

dnd-kit에는 접근성을 위한 키보드 탐색 기능이 기본으로 포함되어 있습니다. 사용자는 스페이스 키를 눌러 항목을 집고, 화살표 키로 새 위치로 이동한 다음, 스페이스 키를 다시 눌러 항목을 놓을 수 있습니다. 변경하지 않고 드래그를 취소하려면 Esc 키를 누릅니다. 이러한 상호작용은 화면 낭독기에 자동으로 전달됩니다.

dnd-kit은 드래그 가능한 항목에 aria-grabbed를 자동으로 적용하여 보조 기술에 항목을 잡은 상태를 알립니다. 드롭 가능 영역에는 aria-dropeffect를 사용하여 항목을 놓을 때 발생할 동작을 전달합니다. 라이브 영역은 상태 업데이트를 알려 주므로 화면 낭독기 사용자는 "항목을 집었습니다" 또는 "항목을 성공적으로 놓았습니다"와 같은 확인 메시지를 들을 수 있습니다.

dnd-kit은 트리 셰이킹이 가능하도록 설계되어 실제로 사용하는 부분만 가져올 수 있습니다. CSS가 번들에 포함되지 않으므로 드래그 가능한 요소, 오버레이, 드롭 영역의 시각적 스타일 지정은 전적으로 사용자가 담당합니다. 따라서 번들 크기를 최소화할 수 있습니다.

DndContext는 드래그 수명 주기를 추적하기 위한 세 가지 주요 이벤트 콜백을 제공합니다. onDragStart는 사용자가 드래그를 시작할 때 실행되며 활성 항목의 ID를 받습니다. onDragOver는 드래그 중인 항목이 드롭 가능한 대상을 지나 이동하는 동안 계속 실행됩니다. onDragEnd는 드래그가 완료될 때 실행되며 활성 항목과 드롭 대상을 제공합니다.

sensors 속성과 useSensors 훅을 함께 사용하여 센서 구성 배열을 DndContext에 전달합니다. 각 센서는 useSensor(SensorClass, options)로 초기화됩니다. 예를 들어 클릭할 때 실수로 드래그되는 것을 방지하도록 PointerSensor에 최소 드래그 거리를 구성할 수 있습니다.

수정자는 드래그 좌표를 드래그된 요소에 적용하기 전에 변환합니다. restrictToVerticalAxis는 이동을 한 방향으로만 제한합니다. restrictToParentElement는 드래그된 항목이 컨테이너 안에 있도록 유지합니다. snapCenterToCursor는 요소의 중심이 커서를 따라가도록 맞춥니다. 여러 수정자는 배열로 조합합니다.

모든 드래그 가능 요소와 드롭 가능 요소에는 고유한 문자열 또는 숫자 ID가 필요합니다. 이러한 ID는 dnd-kit이 무엇을 드래그하고 어디에 놓는지 추적하는 기본 수단입니다. onDragEnd에서는 드래그된 항목에 대해 event.active.id를 읽고, 드롭 대상에 대해서는 event.over?.id를 읽어 애플리케이션 상태를 업데이트합니다.

키보드 지원을 나중에 추가하는 많은 DnD 라이브러리와 달리 dnd-kit은 접근성을 설계의 핵심에 둡니다. KeyboardSensor는 PointerSensor와 동일한 기능을 제공하는 일급 구성 요소입니다. 모든 ARIA 속성은 자동으로 관리되며, DndContext의 accessibility 속성을 통해 사용자 지정 안내를 구성할 수 있습니다.

dnd-kit에서 진행 중인 키보드 드래그를 변경 없이 취소할 때 사용하는 키는 무엇입니까?

dnd-kit은 보관 처리된 react-beautiful-dnd를 대신하여 React 끌어서 놓기의 커뮤니티 표준이 되었습니다. 아키텍처는 상태 관리를 위한 DndContext, 입력 추상화를 위한 센서(Pointer, Keyboard, Touch), 이동 제한을 위한 수정자를 중심으로 구성됩니다. 접근성이 핵심 기능으로 제공되어 ARIA 속성, 라이브 영역 안내, 완전한 키보드 탐색이 기본으로 포함되어 있습니다.