[javascript] Beautiful Dnd를 사용하여 드래그 앤 드롭으로 게임 인벤토리 만들기

21 Nov 2023

javascript

브라우저에서 게임을 개발할 때, 가장 일반적인 요구 사항 중 하나는 인벤토리 시스템입니다. 인벤토리 시스템은 아이템을 드래그하여 이동하거나 재정렬할 수 있는 기능을 제공합니다. 이를 가능하게 해주는 라이브러리 중 하나인 React Beautiful Dnd를 사용하여 드래그 앤 드롭으로 게임 인벤토리를 만들어 보겠습니다.

React Beautiful Dnd 설치

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

npm install react-beautiful-dnd

사용 방법

react-beautiful-dnd 패키지를 import합니다:

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

인벤토리 컴포넌트를 만들고 DragDropContext, Droppable, Draggable 컴포넌트를 사용합니다. 인벤토리 항목은 Droppable 및 Draggable 컴포넌트 내에 배치됩니다:

function Inventory() {
  const items = [
    { id: 'item1', content: '아이템 1' },
    { id: 'item2', content: '아이템 2' },
    { id: 'item3', content: '아이템 3' },
  ];

  return (
    <DragDropContext>
      <Droppable droppableId="inventory">
        {(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 핸들러를 구현해야 합니다:

class App extends React.Component {
  onDragEnd = (result) => {
    // 아이템 드래그 앤 드롭 완료 후 처리해야 할 로직을 작성합니다.
  }

  render() {
    return (
      <div>
        {/* ... */}
        <Inventory />
      </div>
    );
  }
}

DragDropContext 컴포넌트에 onDragEnd 핸들러를 전달합니다:

<DragDropContext onDragEnd={this.onDragEnd}>

마치며

이제 React Beautiful Dnd를 사용하여 드래그 앤 드롭으로 게임 인벤토리를 구현하는 방법을 알아보았습니다. React Beautiful Dnd는 간단하고 유연한 인터페이스를 제공하여 드래그 앤 드롭 작업을 쉽게 처리할 수 있습니다.

더 많은 정보를 위해서는 React Beautiful Dnd 공식 문서를 참조해주세요: React Beautiful Dnd

Happy coding!