[javascript] Beautiful Dnd를 사용하여 드래그 앤 드롭으로 쇼핑 카트 만들기

21 Nov 2023

javascript

최근에는 웹 애플리케이션에서 드래그 앤 드롭 기능을 구현하는 것이 매우 간단해졌습니다. 이러한 기능을 구현하기 위해 React 라이브러리의 Beautiful Dnd 패키지를 사용해보겠습니다. Beautiful Dnd는 사용자 친화적인 드래그 앤 드롭 인터페이스를 제공하여 쇼핑 카트와 같은 기능을 쉽게 구현할 수 있도록 도와줍니다.

Beautiful Dnd 설치

먼저 Beautiful Dnd를 설치해야 합니다. 다음 명령을 사용하여 패키지를 설치하세요.

npm install react-beautiful-dnd

쇼핑 카트 구현하기

일단 필요한 컴포넌트를 생성하고, Beautiful Dnd 컴포넌트를 사용하여 드래그 앤 드롭 기능을 적용해보겠습니다.

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

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

const Cart = () => {
  const [cartItems, setCartItems] = useState(items);

  const onDragEnd = (result) => {
    if (!result.destination) {
      return;
    }

    const { source, destination } = result;
    const updatedItems = [...cartItems];

    const [removed] = updatedItems.splice(source.index, 1);
    updatedItems.splice(destination.index, 0, removed);

    setCartItems(updatedItems);
  };

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

export default Cart;

위 예제 코드에서는 items 배열을 사용하여 초기 쇼핑 카트 아이템을 설정합니다. 이후 cartItems 상태를 사용하여 쇼핑 카트 배열을 관리합니다. onDragEnd 함수는 드래그 앤 드롭 이벤트가 종료될 때 호출되며, 아이템의 순서를 갱신하기 위해 cartItems 배열을 업데이트합니다.

DragDropContext는 드래그 앤 드롭 기능을 구현할 컨테이너 역할을 합니다. Droppable은 드롭 가능한 영역을 나타내며, Draggable은 드래그 가능한 아이템을 나타냅니다. 이러한 Beautiful Dnd 컴포넌트를 조합하여 쇼핑 카트를 구현할 수 있습니다.

결론

Beautiful Dnd를 사용하면 React 애플리케이션에서 쉽게 드래그 앤 드롭 기능을 구현할 수 있습니다. 쇼핑 카트 예제를 통해 Beautiful Dnd의 사용법을 익혀보세요. Beautiful Dnd의 자세한 정보와 사용 방법은 공식 문서를 참조하시기 바랍니다.