부트캠프/Front
[React] Drag and Drop 구현하기 (HTML API)
혀니hyun
2025. 3. 28. 02:22
리액트 투두리스트 과제 중, Drag and Drop 기능을 구현했다.
react-beautiful-dnd는 지원이 종료되어, HTML Drag and Drop API를 활용했다.
지금은 Drag and Drop 1단계 정도고, 계속 응용 해볼 예정.
참고: MDN 문서 | 인파, 드래그 앤 드롭 기능 이해 & 구현하기 | jinist, [React] Drag and Drop 이벤트 적용해보기
우선 이 투두리스트 드래그앤드랍 기능과 관련한 컴포넌트는 두 개가 있다. (1. 최상위 컴포넌트 2. Todo Item 컴포넌트)
1. 최상위 컴포넌트
드래그 이벤트 함수를 정의한다.
const App = () => {
// 드래그 중인 요소, 드래그 하면서 지나치고 있는 요소를 useState로 정의한다
const [drag, setDrag] = useState(0);
const [dragOver,setDragOver] = useState(0);
// 드래그 시작 이벤트. 해당 요소의 배열 인덱스를 매개변수 position으로 받음.
const onDragStart = (e, position) => {
setDrag(position);
e.dataTransfer.effectAllowed = "move";
}
// 드래그 중 다른 요소를 지나칠 때 이벤트.
const onDragEnter = (e, position) => {
setDragOver(position);
}
// 드래그 끝 이벤트.
const onDragEnd = (e) => {
let newTodoData = [...todoData];
let dragItemValue = newTodoData[drag];
newTodoData.splice(drag, 1); // 드래그 했던 요소 데이터를 지우고
newTodoData.splice(dragOver, 0, dragItemValue); // 드롭한 배열 요소의 위치에 다시 추가함
setDrag(null);
setDragOver(null);
setTodoData(newTodoData);
}
}
2. Todo Item 컴포넌트
드래그 이벤트가 적용되는 Todo Item의 속성과 이벤트를 아래와 같이 설정한다. (21~25줄)
이벤트 함수들을 Props로 전달 받아 이벤트를 정의한다.
NEXT PLAN
1. 지금은 dragEnd 돼서야 리스트 순서가 바뀌는데, dragEnter 시에도 바뀐 순서로 보이게 하고 싶다
2. 드래그 대상 요소 스타일링