React에서 드래그 앤 드롭 기능 구현하기: @hello-pangea/dnd

@hello-pangea/dnd 라이브러리 선택한 이유

모바일 지원

@hello-pangea/dnd는 모바일 장치에서도 원활하게 작동합니다. 모바일 웹 애플리케이션을 개발할 때 중요한 요구 사항을 충족합니다.

React 최신 버전 및 StrictMode 호환성

다른 드래그 앤 드롭 라이브러리는 React 최신 버전이나 React.StrictMode와 호환되지 않는 경우가 많지만, @hello-pangea/dnd는 이와 완벽하게 호환됩니다. 이는 최신 React 기능을 사용하는 애플리케이션에서도 안정적으로 동작할 수 있음을 의미합니다.

설치

npm install @hello-pangea/dnd

기본 사용법

이 라이브러리의 핵심 구성 요소는 DragDropContext, Droppable, Draggable 세 가지입니다.

DragDropContext

드래그 앤 드롭 기능을 감싸는 컨텍스트 컴포넌트입니다. 드래그 앤 드롭 이벤트를 처리하는 함수(onDragEnd)를 전달합니다.

Droppable

드롭 가능한 영역을 정의하는 컴포넌트로, 이 안에 드래그 가능한 항목들을 포함합니다.

Draggable

실제로 드래그 가능한 항목을 정의하는 컴포넌트로, 이 항목은 Droppable 영역 내에 포함됩니다.

기본 예제

import React from 'react';
import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd';

const onDragEnd = (result: DropResult) => {
  // 드래그 앤 드롭 완료 후 처리할 로직
};

const App = () => (
  <DragDropContext onDragEnd={onDragEnd}>
    <Droppable droppableId="droppable">
      {(provided) => (
        <div ref={provided.innerRef} {...provided.droppableProps}>
          {[0, 1, 2].map((item, index) => (
            <Draggable key={item} draggableId={item.toString()} index={index}>
              {(provided) => (
                <div
                  ref={provided.innerRef}
                  {...provided.draggableProps}
                  {...provided.dragHandleProps}
                >
                  Item {item}
                </div>
              )}
            </Draggable>
          ))}
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  </DragDropContext>
);

export default App;