드래그 앤 드롭

드래그 앤 드롭이란?

Drag and Drop(드래그 앤 드롭) 라이브러리는 사용자가 마우스(또는 터치)를 사용하여 화면 상의 요소를 드래그하고 다른 위치에 드롭할 수 있도록 기능을 제공하는 라이브러리. 주로 웹 애플리케이션에서 인터페이스를 직관적으로 만들기 위해 많이 사용되며, 파일 업로드, 리스트 정렬, UI 요소 이동 등에 활용

장점 및 단점

장점	설명
직관적인 UI/UX	사용자가 시각적으로 요소를 움직이면서 작업할 수 있어 이해하기 쉽고 직관적임.
생산성 향상	사용자가 직접 항목을 정렬하거나 구성할 수 있어 작업 속도 향상.
유연성	다양한 상황(파일 업로드, 레이아웃 구성, 태스크 보드 등)에 맞게 활용 가능.
시각적 피드백 제공	애니메이션 등을 통해 사용자에게 실시간 피드백을 제공함으로써 인터랙션 만족도 향상.

단점	설명
접근성(Accessibility) 문제	마우스에 의존적인 경우, 키보드 사용자나 스크린리더 사용자에게 불편함을 줄 수 있음.
모바일 대응 어려움	터치 디바이스에서의 드래그 앤 드롭은 제스처 인식 충돌 등으로 구현이 까다로움.
복잡한 구현	커스터마이징이 많아질수록 이벤트 처리, 상태 동기화 등이 복잡해짐.
성능 문제	DOM 조작이 많은 경우, 특히 대량의 요소를 드래그할 때 성능 저하가 발생할 수 있음.
브라우저 호환성 문제	특히 HTML5 DnD API는 브라우저 간의 구현 차이로 인해 버그가 생길 수 있음.

설치

npm install @dnd-kit/core@next @dnd-kit/sortable@next

라이브러리 모듈

@dnd-kit/core (기능 제어 및 감지) DndContext : 모든 드래그 앤 드롭 인터랙션을 감싸는 최상위 컨테이너. 드래그 시작, 이동, 종료 등의 이벤트 관리 closestCenter : 드래그 중인 아이템이 다른 아이템 위에 놓였을 때, 충돌을 감지하는 알고리즘. 아이템의 중심점이 어디에 가장 가까운지를 계산해 순서를 바꿈 KeyboardSensor : 키보다(Tab, Space, 화살표)로 순서를 바꿀 수 있게 하여 웹 접근성을 높임 PointerSensor : 마우스와 일반 포인터 감지 TouchSensor : 스마트폰, 태블릿 등 모바일 터치를 감지 useSensor, useSensors : 다른 센서들을 리액트에서 활성화하고 설정하기 위해 사용하는 Hook

@dnd-kit/sortable (목록 정렬 전용) arrayMove : 배열 내에서 아이템의 위치를 실제로 바꿔주는 유틸리티 함수 SortableContext : 드래그 가능한 아이템들의 범위를 지정, items 프롭으로 아이템들의 ID 배열을 넘겨주어 순서를 추적 sortableKeyboardCoordinates : 키보드로 이동할 때 아이템이 어느 좌표로 움직여야 하는지 계산해주는 키보드 전용 설정 verticalListSortingStrategy : 아이템들이 수직(위아래)로 쌓여있을 때 사용하는 애니메이션. 드래그 시 옆으로 비켜나가지 않고 위아래로만 움직이게 유도 useSortable : 개별 아이템 컴포넌트 내부에서 사용하는 Hook. 해당 아이템에 드래그 핸들러(listeners)와 접근성 속성(attributes)을 부여

@dnd-kit/utilities (스타일 변환) CSS : 드래그 중에 발생하는 위치 변화와 부드러운 움직임을 리액트 인라인 스타일로 쉽게 변환해주는 도구