투두리스트에 드래그 앤 드롭을 적용하자

https://studysmart.tistory.com/97

리액트 드래그 앤 드롭(DND)

이 글 그대로 적용했기에,  특별하게 추가되는 내용 없이 간략하게 적용하는 것만 썼다.

 

 

 

내 그림실력이 아이패드병을 고쳐주고 있어

프로젝트의 계층 구조는 대략 이렇게 되어 있다.  Home.jsx에 핸들러를 생성하고 props를 통해 드래그 이벤트가 발생할 TodoItem까지 내려줄 것이다.

 

 

 

TodoItem의 최상단 div 박스에 draggable과 드래그 이벤트를 실행시킨다. console.log를 통해 몇 번째 인덱스 번호가 실행되는지 출력해 보겠다. 

 

 

 

첫 번째 요소가 드래그 됐을 때 ‘0번 드래그 됨’이 잘 출력됨을 확인할 수 있다. 드래그 이벤트는 문제가 없다. 이제 쭉쭉 진행하면 된다.

 

 

 

useRef를 통해 드래그될 컴포넌트와, 겹칠 컴포넌트의 index 값을 받을 함수를 만들어준다. console.log는 확인용으로, 마지막에 지우면 된다.

 

 

 

위에서 만든 핸들러를 TodoItem 컴포넌트에 적용시켜 주면 

 

 

 

선택한 요소와 겹치는 요소의 인덱스 값을 잘 받아오는 것을 확인할 수 있다.

 

 

 

마지막으로 내려놨을 때 실행 될 onDragEnd를 만들고, 다시 TodoItem까지 내려주고, onDragEnd 이벤트를 실행시켜 주면...!

 

 

 

 

 

이젠 드래그 앤 드롭이 가능하다..