[javascript] Beautiful Dnd를 사용하여 드래그 앤 드롭으로 요소 그룹핑하기

21 Nov 2023

javascript

이번 포스트에서는 React 라이브러리인 Beautiful Dnd를 사용하여 드래그 앤 드롭으로 요소를 그룹핑하는 방법을 알아보겠습니다. Beautiful Dnd는 사용자 친화적인 드래그 앤 드롭 인터랙션을 제공하며, 간편한 API로 요소를 이동시킬 수 있습니다.

Beautiful Dnd 설치하기

먼저 Beautiful Dnd를 설치해야 합니다. 프로젝트 디렉토리에서 다음 명령을 실행하여 패키지를 설치합니다:

npm install react-beautiful-dnd

요소 그룹화를 위한 컴포넌트 구성하기

그룹화를 위한 컴포넌트를 구성해보겠습니다. 우선, 필요한 React 컴포넌트를 import합니다.

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

이제 컴포넌트를 구성해줍니다. 예를 들어, ToDoList에서 Todo 아이템을 드래그 앤 드롭으로 DoneList로 이동할 수 있도록 구현해보겠습니다.

const ToDoList = () => {
  const todos = [
    { id: 1, content: 'Buy groceries' },
    { id: 2, content: 'Do laundry' },
    { id: 3, content: 'Clean the house' },
    { id: 4, content: 'Walk the dog' },
  ];

  const doneList = [
    // 이곳에 이미 완료된 작업들을 넣어줍니다.
  ];

  const handleDragEnd = (result) => {
    // 드래그 앤 드롭 완료 후 처리하는 로직을 작성합니다.
  };

  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <Droppable droppableId="todoList">
        {(provided, snapshot) => (
          <div
            {...provided.droppableProps}
            ref={provided.innerRef}
            style={{
              background: snapshot.isDraggingOver ? 'lightblue' : 'lightgrey',
              padding: 16,
              width: 250,
              minHeight: 200,
            }}
          >
            {todos.map((todo, index) => (
              <Draggable key={todo.id} draggableId={todo.id} index={index}>
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    style={{
                      userSelect: 'none',
                      padding: 16,
                      margin: '0 0 8px 0',
                      backgroundColor: 'white',
                      border: '1px solid lightgrey',
                      borderRadius: '2px',
                      ...provided.draggableProps.style,
                    }}
                  >
                    {todo.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
      <Droppable droppableId="doneList">
        {(provided, snapshot) => (
          <div
            {...provided.droppableProps}
            ref={provided.innerRef}
            style={{
              background: snapshot.isDraggingOver ? 'lightblue' : 'lightgrey',
              padding: 16,
              width: 250,
              minHeight: 200,
              marginTop: 16,
            }}
          >
            {doneList.map((done, index) => (
              <Draggable key={done.id} draggableId={done.id} index={index}>
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    style={{
                      userSelect: 'none',
                      padding: 16,
                      margin: '0 0 8px 0',
                      backgroundColor: 'white',
                      border: '1px solid lightgrey',
                      borderRadius: '2px',
                      ...provided.draggableProps.style,
                    }}
                  >
                    {done.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default ToDoList;

위 코드에서는 DragDropContext, Droppable, Draggable 컴포넌트를 사용하여 드래그 앤 드롭 인터랙션을 구현하고 있습니다. DragDropContext로 전체 컨텍스트를 래핑하고, Droppable로 드롭 영역을 설정하며, Draggable로 드래그 가능한 요소를 정의합니다.

또한, handleDragEnd 함수를 구현하여 드래그 앤 드롭이 완료되었을 때 처리할 로직을 작성할 수 있습니다.

결론

Beautiful Dnd를 사용하면 React 애플리케이션에서 간편하게 요소를 드래그 앤 드롭으로 그룹화할 수 있습니다. 이를 활용하면 사용자 친화적인 UI를 제공하는데 도움이 될 것입니다. 자세한 내용은 공식 문서를 참조해주세요.