Immer를 사용한 드래그 앤 드롭 기능 구현하기

27 Sep 2023

immer

드래그 앤 드롭(Drag and Drop) 기능은 사용자가 요소를 마우스로 클릭하여 드래그한 후, 다른 위치로 드롭하는 기능을 말합니다. 이는 웹 애플리케이션에서 사용자 경험을 향상시키는 중요한 기능 중 하나입니다. 이번 기술 블로그에서는 Immer 라이브러리를 사용하여 React 애플리케이션에서 드래그 앤 드롭 기능을 구현하는 방법을 알아보겠습니다.

Immer란?

Immer는 불변성을 유지하면서 상태를 수정하기 위한 JavaScript 라이브러리입니다. 이 라이브러리는 제어 가능한 불변성을 제공하며, 가독성과 효율성을 높이기 위해 상태 변경을 간소화합니다. 이를 통해 복잡한 상태 관리 로직과 상태 업데이트 코드를 간편하게 작성할 수 있습니다.

드래그 앤 드롭 구현하기

이제 Immer를 사용하여 React 애플리케이션에서 드래그 앤 드롭 기능을 구현해보겠습니다. 아래는 간단한 예시 코드입니다.

import React, { useState } from 'react';
import { produce } from 'immer';

const App = () => {
  const [items, setItems] = useState([
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
    { id: 3, text: 'Item 3' }
  ]);

  const handleDragStart = (e, index) => {
    e.dataTransfer.setData('text/plain', index);
  };

  const handleDragOver = (e, index) => {
    e.preventDefault();
  };

  const handleDrop = (e, dropIndex) => {
    const dragIndex = e.dataTransfer.getData('text/plain');
    setItems(
      produce(items, draft => {
        const draggedItem = draft[dragIndex];
        draft[dragIndex] = draft[dropIndex];
        draft[dropIndex] = draggedItem;
      })
    );
  };

  return (
    <div>
      {items.map((item, index) => (
        <div
          key={item.id}
          draggable
          onDragStart={e => handleDragStart(e, index)}
          onDragOver={e => handleDragOver(e, index)}
          onDrop={e => handleDrop(e, index)}
        >
          {item.text}
        </div>
      ))}
    </div>
  );
};

export default App;

위의 예시 코드에서는 useState 훅을 사용하여 items 배열을 상태로 관리합니다. handleDragStart 함수는 드래그를 시작할 때 호출되는 이벤트 핸들러로, 드래그 중인 요소의 인덱스를 dataTransfer로 전달합니다. handleDragOver 함수는 드래그 중인 요소를 드롭할 수 있는 위치인지 확인하기 위해 호출되는 이벤트 핸들러입니다. handleDrop 함수는 드롭 시 호출되는 이벤트 핸들러로, Immer의 produce 함수를 사용하여 items 배열을 변경합니다.

드래그 앤 드롭을 구현하기 위해 각 요소를 draggable로 설정하고, onDragStart, onDragOver, onDrop 이벤트 핸들러를 등록합니다.

마무리

Immer를 사용하여 React 애플리케이션에서 드래그 앤 드롭 기능을 구현하는 방법에 대해 알아보았습니다. Immer를 활용하면 불변성을 유지하면서 간단하고 가독성이 좋은 코드를 작성할 수 있습니다.

이 포스트가 도움이 되었기를 바랍니다! #Immer #드래그앤드롭