TIL13 | Drag and Drop

구현 사항

• TypeScript 사용한 TodoList 구현
• Drag and Drop 기능 구현 (라이브러리 없이)
• Todo Item 상태 변경과 필터링
  
  

Points

• Drag and Drop
• Github project, issue 활용
  
  

Things I learned

React로 Drag and Drop 동작 구현

• 기본 개념

  • draggable : element에 draggable HTML 속성을 주어야 Drag & Drop이 가능함
  • onDragStart : drag 시작될 때 발생하는 이벤트. 주로 drag되는 element를 특정하기 위해 사용됨
  • onDragEnter / onDragOver / onDragLeave : drag되는 element가 적합한 drop target 위로 올라갈 때 / 지나갈 때 / 벗어날 때 발생하는 이벤트
  • onDragEnd : drag가 완료될 때 발생하는 이벤트

• 동작 구현 흐름

  1. dragStart 이벤트 리스너를 통해 drag되는 element를 tracking한다. (useRef current로 위치 체크)
  2. dragEnter 이벤트 리스너를 통해 drop 대상이 되는 element를 tracking한다. (역시 useRef 이용)
  3. dragEnd 이벤트 리스너를 통해 drag가 끝난 시점에 dragOver된 target 위치에 dragging element를 끼워넣는다. (array.splice)

  vanilla js로 드래그 앤 드랍을 구현하는 영상을 먼저 보았는데, 리액트로 DOM 조작을 얼마나 편리하게 할 수 있는지 느껴볼 수 있었다.
  
  

Github project / issue 활용

처음으로 팀 과제에서 깃헙 이슈를 사용했다.
1. 이슈에 구현, 수정할 기능을 작성하고,
2. 이슈 넘버를 브랜치명으로 사용하고,
3. 풀 리퀘스트와 프로젝트를 이슈와 연동하여 작업했다.

각자의 진행 상황이나 앞으로 해야 할 일을 명확하게 파악할 수 있어서 매우 효과적이었다. 개인 프로젝트를 할 때도 일정 관리에 사용해봐야겠다.

Reference

• Implementing React Drag and Drop without any external library