dnd kit

dnd kit
React를 위한 현대적이고 가볍고 성능 좋은 드래그 앤 드롭 툴킷 라이브러리이다.
기존의 HTML5 Drag and Drop API를 사용하지 않고 React의 훅(hooks)과 상태 관리(state management)를 활용하여 유연하고 확장 가능한 솔루션을 제공하는 것이 특징이다.

특징

React 기반: useDraggable과 useDroppable 같은 React 훅을 제공하여 기존 컴포넌트에 드래그 앤 드롭 기능을 쉽게 추가할 수 있다.
가볍고 모듈화: 코어 라이브러리는 최소화된 상태에서 약 10KB 정도의 매우 작은 용량을 자랑하며, 외부 의존성이 없다. 필요한 기능만 선택적으로 사용할 수 있도록 여러 패키지로 구성되어 있다.
높은 접근성(Accessibility): 키보드 입력 지원, 스크린 리더를 위한 사용자 정의 지침 및 실시간 업데이트(live regions announcements) 기능을 내장하여 접근성을 고려한 UI를 쉽게 구현할 수 있다.
다양한 입력 방식 지원: 마우스, 터치, 키보드 등 다양한 입력 센서를 기본으로 지원하며, 필요에 따라 커스텀 센서를 만들 수도 있다.
유연하고 확장 가능: 애니메이션, 전환 효과, 동작 방식, 스타일 등 모든 세부 사항을 커스터마이징할 수 있다. 충돌 감지 알고리즘이나 센서 등을 직접 만들 수도 있다.
뛰어난 성능: DOM을 직접 조작하지 않고, 드래그 작업이 시작될 때만 초기 위치와 레이아웃을 계산하여 저장함으로써 부드러운 상호작용과 애니메이션을 지원한다.