[React] Drag and Drop 구현하기 (HTML API)

 

리액트 투두리스트 과제 중, 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. 드래그 대상 요소 스타일링