React/dnd

React Dnd kit 정리 - 드래그 앤 드롭으로 위치 바꾸기(가로, 세로, 그리드)

React Dnd kit 정리 - 드래그 앤 드롭으로 위치 바꾸기 1. React Dnd kit란? React에서 드래그 앤 드롭 인터페이스를 구축하기 위한 패키지 세트. 끌어서 놓을 수 있는 요소를 만들고 이벤트를 관리하고 상호 작용을 구현하도록 도움을 준다. 2. 설치 npm install @dnd-kit/core npm install react react-dom Modifiers 이동 좌표를 동적으로 수정할 수 있는 기능을 제공한다. 단일 축 동작 제한 드래그 가능한 노드 컨테이너, 스크롤 컨테이너의 사각형 경계로 이동 제한 모션 고정 적용 등.. 이와 같은 기능들을 구현하기 위해서는 modifiers의 DndContext, DraggableClone을 활용해야 한다. npm install @dnd..