dnd-kit
-
[WizSched] Drag & Drop 보드 컴포넌트 - (2) Task Object 배열로 만들기Front-End/Project 2024. 8. 17. 07:33
🍀목차먼저, 단순한 형태인 string 배열로 이해해 보자실제 데이터와 비슷하게 만들어보자어디를 고쳐야 할까? 먼저, 단순한 형태인 string 배열로 이해해 보자 참고한 코드는 해당 codesandbox이다! 공식 문서 Sortable도 같이 보면 좋다. 아래와 같은 형태, backlog에 있는 1이나 2를 드래그한다면 active.data.current.sortable안에서 데이터들을 확인할 수 있다. const [items, setItems] = useState({ backlog: ['1', '2'], weekly: ['4', '5', '6'], }); DndContext에 전달하는 이벤트 핸들러는 직접 구현한다. codesandbox에서는 아래와 같이 구현했다.o..
-
[WizSched] Drag & Drop 보드 컴포넌트 - (1) dnd-kit 적용Front-End/Project 2024. 7. 27. 07:06
🍀목차목표dnd-kit을 선택한 이유dnd-kit 목표 할 일을 관리하는 Drag & Drop 보드 컴포넌트를 만들기 위해 dnd-kit을 사용해 본다.dnd-kit을 선택한 이유 처음에는 HTML Drag and Drop API, useRef 훅 등을 사용해서 직접 만들어보려 했지만, 두 개의 보드 사이를 드래그 가능한 요소가 이동해야 함, 마우스-키보드-포인터 이벤트 리스너 설정, 웹 접근성 등... Drag & Drop은 필요한 기능이나 예상시간 이상이 소요될 것이라 판단되어 라이브러리를 사용하였다. 가장 유명한 라이브러리는 react-dnd와 react-beautiful-dnd였고, dnd-kit는 둘에 비해서는 신생 라이브러리였다. 셋의 비교를 해보았다. react-beautiful-dnd..
