[javascript] Beautiful Dnd를 사용하여 드래그 앤 드롭으로 컴포넌트 병합하기

21 Nov 2023

javascript

컴포넌트를 드래그 앤 드롭으로 병합하는 기능은 사용자에게 직관적이고 편리한 경험을 제공합니다. 이를 구현하기 위해 Beautiful Dnd 라이브러리를 사용할 수 있습니다. Beautiful Dnd는 리액트 기반의 드래그 앤 드롭 라이브러리로서, 컴포넌트의 순서를 변경하거나 병합하는 등의 작업을 쉽게 수행할 수 있습니다.

Beautiful Dnd 설치하기

먼저 Beautiful Dnd를 설치해야 합니다. 이를 위해 npm을 사용할 수 있습니다. 아래의 명령어를 사용하여 Beautiful Dnd를 설치합니다.

npm install react-beautiful-dnd

Beautiful Dnd 사용하기

Beautiful Dnd를 사용하여 드래그 앤 드롭으로 컴포넌트를 병합하는 예제를 살펴보겠습니다.

먼저, Beautiful Dnd의 DragDropContext, Droppable, Draggable 컴포넌트를 import합니다. 그리고 드래그 앤 드롭이 가능한 컴포넌트를 만들고, 컴포넌트들을 감싸는 Droppable 컴포넌트를 만듭니다. 이 때, Droppable 컴포넌트에는 droppableId와 type을 지정해줘야 합니다.

import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const items = [
  { id: 'item-1', content: 'Item 1' },
  { id: 'item-2', content: 'Item 2' },
  { id: 'item-3', content: 'Item 3' }
];

const App = () => {
  const onDragEnd = (result) => {
    // 드래그 앤 드롭 완료 시 호출되는 콜백 함수
    const { destination, source, draggableId } = result;
    
    if (!destination) {
      return;
    }

    if (destination.droppableId === source.droppableId && destination.index === source.index) {
      return;
    }

    // 컴포넌트 병합 로직 구현
    // ...
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="droppable" type="item">
        {(provided) => (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            {items.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    {item.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

위의 예제 코드에서는 onDragEnd 함수에서 드래그 앤 드롭 완료 시 호출되는 콜백 함수를 구현하면 됩니다. 드롭된 컴포넌트의 정보를 통해 컴포넌트 병합 로직을 구현할 수 있습니다.

또한, Droppable 컴포넌트와 Draggable 컴포넌트에서 각각 droppableId와 draggableId를 설정해주어야 합니다. 이를 통해 Beautiful Dnd가 컴포넌트를 식별하고 관리할 수 있습니다.

마무리

Beautiful Dnd를 사용하여 드래그 앤 드롭으로 컴포넌트를 병합하는 방법을 살펴보았습니다. 이를 통해 사용자들은 직관적이고 쉽게 컴포넌트를 관리할 수 있게 되었습니다.

더 자세한 내용은 Beautiful Dnd 공식 문서를 참고하시기 바랍니다.