[javascript] Beautiful Dnd를 사용하여 드래그 앤 드롭으로 델리트 메뉴 만들기

21 Nov 2023

javascript

이번 블로그 포스트에서는 Beautiful Dnd를 사용하여 드래그 앤 드롭으로 델리트 메뉴를 만드는 방법에 대해 알아보겠습니다. Beautiful Dnd는 React를 위한 강력한 드래그 앤 드롭 라이브러리로, 사용하기 쉽고 매우 유연한 기능을 제공합니다.

Beautiful Dnd 설치하기

Beautiful Dnd를 사용하기 위해, 다음 명령어를 사용하여 패키지를 설치해야 합니다.

npm install react-beautiful-dnd

또는

yarn add react-beautiful-dnd

델리트 메뉴 컴포넌트 만들기

델리트 메뉴를 만들기 위해 다음과 같은 컴포넌트 구조를 만들어야 합니다.

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

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

  const onDragEnd = (result) => {
    // 드래그 앤 드롭이 끝나면 실행되는 콜백 함수
    // 여기에서 상태를 업데이트하거나 다른 동작을 수행할 수 있습니다.
  };

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

export default DeleteMenu;

위 코드에서 DeleteMenu 컴포넌트는 DragDropContext, Droppable, Draggable 컴포넌트를 사용하여 구성되어 있습니다.

items 배열은 삭제 메뉴에 표시될 아이템들을 나타냅니다. 이 아이템들은 드래그 앤 드롭 가능하도록 Draggable 컴포넌트 안에 렌더링 됩니다.

onDragEnd 콜백 함수는 드래그 앤 드롭 동작이 끝나면 실행되는 함수로서, 상태를 업데이트하거나 다른 동작을 수행하는 등의 로직을 구현할 수 있습니다.

DragDropContext, Droppable, Draggable 컴포넌트는 Beautiful Dnd에서 제공하는 컴포넌트이며, 해당 컴포넌트들을 사용하여 드래그 앤 드롭 동작을 구현할 수 있습니다.

Beautiful Dnd로 델리트 메뉴 사용하기

위에서 작성한 DeleteMenu 컴포넌트를 실제로 사용해보려면, 해당 컴포넌트를 다른 컴포넌트에서 렌더링해야 합니다. 다음은 예시 코드입니다.

import React from 'react';
import DeleteMenu from './DeleteMenu';

const App = () => {
  return (
    <div>
      <h1>드래그 앤 드롭으로 델리트 메뉴 만들기</h1>
      <DeleteMenu />
    </div>
  );
};

export default App;

위 예시 코드에서 App 컴포넌트에서 DeleteMenu 컴포넌트를 렌더링하고 있습니다.

결론

Beautiful Dnd를 사용하여 드래그 앤 드롭으로 델리트 메뉴를 만드는 방법에 대해 알아보았습니다. Beautiful Dnd는 React에서 강력한 드래그 앤 드롭 기능을 제공하여 사용자 친화적인 UI를 구현할 수 있도록 도와줍니다. Beautiful Dnd의 공식 문서를 참조하여 더 자세한 내용을 알아보시기 바랍니다.

참고 자료