Redux Thunk를 사용한 드래그 앤 드롭 기능 예제

18 Oct 2023

redux

이번 예제에서는 Redux Thunk를 사용하여 드래그 앤 드롭 기능을 구현하는 방법을 알아보겠습니다. 드래그 앤 드롭 기능은 사용자가 마우스로 요소를 클릭하고 이동시키는 동작을 의미합니다. 이를 Redux Thunk를 통해 상태 관리하는 방법을 살펴보겠습니다.

Redux Thunk란?

Redux Thunk는 Redux의 미들웨어 중 하나로, 액션 생성자 함수들이 비동기 작업을 수행할 수 있도록 해줍니다. Redux Thunk를 사용하면 액션 대신에 함수를 디스패치(dispatch)할 수 있습니다. 이를 통해 비동기 작업을 처리하고, 액션을 디스패치하는 로직을 미들웨어에서 처리할 수 있게 됩니다.

드래그 앤 드롭 구현 방법

드래그 앤 드롭 기능을 구현하기 위해선 다음과 같은 단계를 따라 진행할 수 있습니다.

드래그 시작 시에는 드래그할 요소의 정보를 액션으로 디스패치합니다.
드래그 중일 때는 요소의 위치 정보를 계속해서 업데이트하고, 이를 액션으로 디스패치하여 상태를 업데이트합니다.
드롭 시에는 드롭한 위치 정보를 액션으로 디스패치하고, 상태를 최종적으로 업데이트합니다.

이러한 과정을 Redux Thunk를 사용하여 구현해보겠습니다.

예제 코드

먼저, 드래그 앤 드롭 기능을 구현하기 위해 필요한 액션 생성자 함수와 리듀서를 정의합니다.

// 액션 타입 정의
const DRAG_START = 'DRAG_START';
const DRAG_UPDATE = 'DRAG_UPDATE';
const DRAG_END = 'DRAG_END';

// 액션 생성자 함수
export const dragStart = (itemId) => ({
  type: DRAG_START,
  payload: {
    itemId
  }
});

export const dragUpdate = (x, y) => ({
  type: DRAG_UPDATE,
  payload: {
    x,
    y
  }
});

export const dragEnd = () => ({
  type: DRAG_END
});

// 초기 상태 정의
const initialState = {
  itemId: null,
  position: {
    x: 0,
    y: 0
  }
}

// 리듀서 정의
export const dragReducer = (state = initialState, action) => {
  switch (action.type) {
    case DRAG_START:
      return {
        ...state,
        itemId: action.payload.itemId
      };
    case DRAG_UPDATE:
      return {
        ...state,
        position: {
          x: action.payload.x,
          y: action.payload.y
        }
      };
    case DRAG_END:
      return initialState;
    default:
      return state;
  }
}

위의 코드에서는 액션 타입과 액션 생성자 함수, 초기 상태, 그리고 리듀서를 정의합니다. 이를 이용하여 드래그 앤 드롭 기능을 구현할 수 있습니다.

// 드래그 앤 드롭 컴포넌트
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { dragStart, dragUpdate, dragEnd } from './dragSlice';

const DragAndDrop = () => {
  const { itemId, position } = useSelector((state) => state.drag);
  const dispatch = useDispatch();

  const handleDragStart = (itemId) => {
    dispatch(dragStart(itemId));
  }

  const handleDragUpdate = (event) => {
    dispatch(dragUpdate(event.clientX, event.clientY));
  }

  const handleDragEnd = () => {
    dispatch(dragEnd());
  }

  return (
    <div
      draggable
      onDragStart={() => handleDragStart(itemId)}
      onDrag={(event) => handleDragUpdate(event)}
      onDragEnd={handleDragEnd}
      style={{
        position: 'absolute',
        top: position.y,
        left: position.x
      }}
    >
      {/* 드래그 앤 드롭할 요소 */}
    </div>
  );
};

export default DragAndDrop;

위의 예제 코드에서는 useSelector를 통해 상태를 가져오고, useDispatch를 통해 액션을 디스패치하여 상태를 업데이트합니다. 또한, 드래그 앤 드롭할 요소에 필요한 이벤트 핸들러를 지정하여 드래그 앤 드롭 기능을 구현합니다.

이제 Redux Thunk를 사용하여 비동기 액션을 처리하는 예제를 통해 드래그 앤 드롭 기능을 구현할 수 있습니다.

프로젝트에 Redux Thunk를 추가하고, 예제 코드를 적용하여 드래그 앤 드롭 기능을 구현해보세요.

참고 자료

Redux 공식 문서: https://redux.js.org/
Redux Thunk 공식 문서: https://github.com/reduxjs/redux-thunk

TOC

Redux Thunk란?

드래그 앤 드롭 구현 방법

예제 코드

참고 자료