dnd kit
@dnd-kit
useDraggable 및 useDroppable 과 같은 후크를 노출합니다. 앱을 다시 설계하거나 추가 래퍼 DOM 노드를 생성하도록 강요하지 않습니다.@dnd-kit/core 위에 구축된 얇은 레이어인 @dnd-kit/sortable 을 확인하세요. 앞으로 더 많은 사전 설정이 제공될 예정입니다. dnd kit 를 시작하는 방법을 알아보려면 공식 문서 웹사이트를 방문하세요. 드래그 앤 드롭 인터페이스를 구축하는 데 도움이 되는 심층적인 API 문서, 팁 및 가이드를 찾을 수 있습니다.
dnd 키트 의 핵심 라이브러리는 두 가지 주요 개념을 공개합니다.
useDraggable 및 useDroppable 후크를 사용하여 기존 구성 요소를 보강하거나 두 가지를 결합하여 드래그 앤 드롭이 가능한 구성 요소를 만듭니다.
<DndContext> 공급자를 사용하여 이벤트를 처리하고 드래그 가능한 요소 및 드롭 가능한 영역의 동작을 사용자 정의하세요. 다양한 입력 방법을 처리하도록 센서를 구성합니다.
일반 문서 흐름에서 제거되고 뷰포트를 기준으로 배치되는 드래그 가능한 오버레이를 렌더링하려면 <DragOverlay> 구성 요소를 사용합니다.
시작하는 방법을 알아보려면 빠른 시작 가이드를 확인하세요.
확장성은 DND 키트 의 핵심입니다. 간결하고 확장 가능하도록 제작되었습니다. 대부분의 사람들이 대부분의 시간 동안 원할 것으로 생각되는 기능이 포함되어 있으며 @dnd-kit/core 위에 나머지 기능을 구축할 수 있는 확장 지점을 제공합니다.
dnd kit 의 확장성 수준을 보여주는 대표적인 예는 @dnd-kit/core 에 의해 노출된 확장 포인트를 사용하여 구축된 Sortable 사전 설정입니다.
DND 키트 의 기본 확장 지점은 다음과 같습니다.
접근 가능한 드래그 앤 드롭 인터페이스를 구축하는 것은 어렵습니다. dnd 키트 에는 드래그 앤 드롭 인터페이스에 액세스할 수 있도록 돕는 여러 가지 합리적인 기본값과 시작점이 있습니다.
aria 속성 에 대한 합리적인 기본값스크린 리더에 더 나은 환경을 제공하는 데 어떻게 도움이 될 수 있는지 자세히 알아보려면 접근성 가이드를 확인하세요.
대부분의 드래그 앤 드롭 라이브러리와 달리 dnd 키트는 의도적으로 HTML5 드래그 앤 드롭 API 위에 구축되지 않습니다 . 이는 의도적인 아키텍처 결정으로, 사용하기로 결정하기 전에 알아야 할 장단점이 있지만 대부분의 애플리케이션에서는 장단점보다 이점이 더 크다고 생각합니다.
HTML5 드래그 앤 드롭 API에는 몇 가지 심각한 제한 사항이 있습니다. 이는 터치 장치를 지원하지 않거나 키보드를 사용하여 항목을 드래그하는 것을 지원하지 않습니다. 즉, 그 위에 구축된 라이브러리는 이러한 입력 방법을 지원하기 위해 완전히 다른 구현을 노출해야 함을 의미합니다. 또한 특정 축이나 컨테이너 경계에 대한 드래그 잠금, 사용자 정의 충돌 감지 전략, 드래그된 항목의 미리 보기 사용자 정의와 같은 일반적인 사용 사례도 지원하지 않습니다.
이러한 문제 중 일부에 대한 해결 방법이 있지만 이러한 해결 방법은 일반적으로 코드베이스의 복잡성과 라이브러리의 전체 번들 크기를 증가시키고 완전히 다른 구현으로 구동되기 때문에 마우스, 터치 및 키보드 레이어 간의 불일치를 초래합니다.
HTML5 드래그 앤 드롭 API를 사용하지 않을 때의 주요 단점은 데스크톱이나 창 간에 드래그할 수 없다는 것입니다. 염두에 두고 있는 드래그 앤 드롭 사용 사례가 이러한 종류의 기능과 관련된 경우 HTML 5 드래그 앤 드롭 API를 기반으로 구축된 라이브러리를 사용하고 싶을 것입니다. 기본 HTML 5 드래그 앤 드롭 백엔드가 있는 React 라이브러리에 대해서는 React-dnd를 확인하는 것이 좋습니다.
dnd 키트를 사용 하면 항목의 위치를 이동해야 할 때마다 DOM을 변경하지 않고도 드래그 앤 드롭 인터페이스를 구축할 수 있습니다.
이는 드래그 작업이 시작될 때 dnd kit 가 놓을 수 있는 컨테이너의 초기 위치와 레이아웃을 느리게 계산하고 저장하기 때문에 가능합니다. 이러한 위치는 useDraggable 및 useDroppable 사용하는 구성 요소에 전달되므로 드래그 작업이 진행되는 동안 항목의 새 위치를 계산하고 다음과 같이 다시 그리기를 트리거하지 않는 고성능 CSS 속성을 사용하여 항목을 새 위치로 이동할 수 있습니다. translate3d 및 scale . 이것이 어떻게 달성될 수 있는지에 대한 예를 보려면 @dnd-kit/sortable 라이브러리에 의해 노출되는 정렬 전략의 구현을 확인하세요.
드래그하는 동안 DOM에서 항목의 위치를 이동할 수 없다는 말은 아닙니다. 이는 지원되며 때로는 불가피한 것입니다. 어떤 경우에는 DOM에서 항목을 이동할 때까지 항목의 새 위치와 레이아웃을 미리 알 수 없습니다. 드래그하는 동안 DOM에 대한 이러한 종류의 변형은 훨씬 더 비용이 많이 들고 다시 그리기를 유발하므로 가능하다면 translate3d 및 scale 사용하여 새 위치를 계산하는 것을 선호합니다.
dnd 키트는 또한 모든 센서의 활성화 이벤트에 대해 SyntheticEvent 리스너를 사용하므로 각 개별 드래그 가능한 노드에 이벤트 리스너를 수동으로 추가하는 것보다 성능이 향상됩니다.
@dnd-kit 저장소에서 작업@dnd-kit/core@dnd-kit/accessibility@dnd-kit/sortable@dnd-kit/modifiers@dnd-kit/utilities 루트 디렉터리에 모든 종속성을 설치해야 합니다. @dnd-kit Lerna 및 Yarn 작업공간을 사용하는 모노레포이므로 npm CLI는 지원되지 않습니다(yarn만).
yarn install그러면 각 프로젝트에 모든 종속성이 설치되고 빌드되며 Lerna를 통해 심볼릭 링크됩니다.
한 터미널에서 yarn start 병렬로 실행합니다.
yarn start 이는 각 패키지를 <packages>/<package>/dist 에 빌드하고 프로젝트를 감시 모드에서 실행하므로 <packages>/<package>/src 내부에 저장한 편집 내용으로 인해 <packages>/<package>/dist 에 다시 빌드됩니다. 결과는 터미널로 스트리밍됩니다.
yarn start:storybook스토리북을 실행합니다. http://localhost:6006을 열어 브라우저에서 봅니다.
소포 기반 놀이터에서 지역 패키지를 가지고 놀 수 있습니다.
yarn start:playground 그러면 localhost:1234 에서 플레이그라운드가 시작됩니다. 하나의 터미널에서 병렬 모드로 lerna를 실행하고 있는 경우, Parcel을 실행하면 소스가 packages/*/src/* 내부에 있는 가져온 모듈을 변경할 때 플레이그라운드가 핫 리로드됩니다. 이를 달성하기 위해 각 패키지의 start 명령은 TDSX에 --noClean 플래그를 전달합니다. 이렇게 하면 파일을 찾을 수 없음 오류로 인해 재구축 사이에 Parcel이 폭발하는 것을 방지할 수 있습니다.
중요한 안전 팁: 플레이그라운드에서 패키지를 추가/변경할 때 package.json의 alias 개체를 사용하세요. 그러면 Parcel이 NPM에서 패키지를 설치하는 대신 파일 시스템으로 해결하도록 지시합니다. 또한 발생할 수 있는 중복 React 오류를 수정합니다.
(세 번째 터미널에서) Cypress를 실행하면 스토리북에 대한 통합 테스트가 실행됩니다.
