React 드래그 앤 드롭 인터랙션 만들기

드래그 앤 드롭은 사용자가 요소를 마우스로 선택하여 드래그하고 원하는 위치로 이동시키는 인터랙션 기능입니다. 오늘은 어떤 상황에 드래그 앤 드롭 인터랙션을 사용하면 좋은지 또, 나쁜지에 대해 알아보고 React를 활용하여 이러한 드래그 앤 드롭 기능을 구현하는 방법에 대해 알아보겠습니다.

 

드래그 앤 드롭을 쓰면 좋은 경우

- 아이템의 위치 변경: 리스트나 그리드와 같이 순서가 있는 항목들을 사용자가 직접 순서를 변경하고자 할 때 드래그 앤 드롭을 사용할 수 있습니다. 예를 들어, 작업 목록에서 작업의 우선순위를 변경하거나, 이미지 갤러리에서 이미지의 순서를 변경하는 등의 경우에 유용합니다.

- 컨텐츠의 이동 또는 복사: 사용자가 텍스트, 이미지 또는 파일과 같은 컨텐츠를 드래그하여 다른 위치로 이동하거나 복사할 수 있는 경우에 드래그 앤 드롭을 활용할 수 있습니다. 이는 파일 탐색기에서 파일을 폴더로 이동시키거나, 이메일 애플리케이션에서 첨부 파일을 첨부할 때 사용할 수 있습니다.

 

드래그 앤 드롭을 쓰면 나쁜 경우

- 접근성 문제: 드래그 앤 드롭은 마우스 또는 터치 기반의 인터랙션을 전제로 합니다. 따라서 키보드만을 사용하는 사용자나 스크린 리더 사용자와 같이 마우스나 터치 기반 인터랙션에 접근하기 어려운 사용자에게는 접근성 문제를 일으킬 수 있습니다. 이 경우 대체 수단이 제공되어야 합니다.

- 사용자의 실수 가능성: 드래그 앤 드롭은 사용자가 실수로 아이템을 이동하거나 삭제하는 등의 오류를 범할 수 있는 가능성이 있습니다. 따라서 실수를 방지하기 위해 적절한 확인 절차나 재확인 기능이 제공되어야 합니다.

작은 디바이스나 터치 기반 환경: 드래그 앤 드롭은 일반적으로 큰 화면과 마우스를 사용하는 환경을 전제로 합니다. 작은 화면이나 터치 기반 디바이스에서는 정확한 드래그와 드롭이 어려울 수 있습니다. 이 경우에는 다른 대안적인 인터랙션 방식을 고려해야 합니다.

 

React DnD 라이브러리 설치

React DnD는 React에서 드래그 앤 드롭 기능을 구현하기 위한 강력한 라이브러리입니다.

다음 명령을 사용하여 React DnD를 설치합니다.

npm install react-dnd react-dnd-html5-backend

 

드래그 앤 드롭 컴포넌트 생성

React DnD를 사용하여 드래그 앤 드롭 기능을 가진 컴포넌트를 생성합니다. 예를 들어, 간단한 텍스트 요소를 드래그하여 다른 위치로 이동시키는 애플리케이션을 만들어 보겠습니다.

import React from 'react';
import { useDrag, useDrop } from 'react-dnd';

const DragAndDropItem = ({ text, index, moveItem }) => {
  const [{ isDragging }, drag] = useDrag({
    item: { type: 'item', index },
    collect: monitor => ({
      isDragging: monitor.isDragging(),
    }),
  });

  const [{ canDrop, isOver }, drop] = useDrop({
    accept: 'item',
    drop: item => moveItem(item.index, index),
    collect: monitor => ({
      canDrop: monitor.canDrop(),
      isOver: monitor.isOver(),
    }),
  });

  const opacity = isDragging ? 0.5 : 1;
  const backgroundColor = isOver ? 'lightblue' : 'white';

  return (
    <div ref={drag} style={{ opacity, backgroundColor }}>
      {text}
    </div>
  );
};

const DragAndDropApp = () => {
  const [items, setItems] = React.useState(['Item 1', 'Item 2', 'Item 3']);

  const moveItem = (dragIndex, hoverIndex) => {
    const draggedItem = items[dragIndex];
    const newItems = [...items];
    newItems.splice(dragIndex, 1);
    newItems.splice(hoverIndex, 0, draggedItem);
    setItems(newItems);
  };

  return (
    <div>
      {items.map((text, index) => (
        <DragAndDropItem
          key={index}
          index={index}
          text={text}
          moveItem={moveItem}
        />
      ))}
    </div>
  );
};

export default DragAndDropApp;

 

위의 코드는 React DnD를 사용하여 드래그 앤 드롭 기능을 구현한 예시입니다. DragAndDropItem 컴포넌트는 각각의 텍스트 요소를 나타내며, DragAndDropApp 컴포넌트는 모든 텍스트 요소를 렌더링합니다. moveItem 함수는 아이템의 위치를 변경하는 로직을 담당합니다.

 

애플리케이션 실행

드래그 앤 드롭 인터랙션을 확인하기 위해 애플리케이션을 실행합니다. 브라우저에서 드래그하여 텍스트 요소를 이동시킬 수 있습니다.

 

이와 같이 React DnD를 활용하여 간단한 드래그 앤 드롭 인터랙션 애플리케이션을 구현할 수 있습니다. React DnD는 다양한 기능과 설정을 제공하여 복잡한 드래그 앤 드롭 기능도 구현할 수 있습니다. 따라서 프로젝트의 요구사항에 맞게 적절히 활용하여 원하는 드래그 앤 드롭 인터랙션을 구현할 수 있습니다.