[javascript] Beautiful Dnd를 사용하여 그리드 항목 드래그 앤 드롭 구현하기

21 Nov 2023

javascript

그리드 시스템은 웹 애플리케이션에서 항목을 정렬하고 구성하는 데 효과적인 방법입니다. 항목을 드래그 앤 드롭으로 이동시키는 기능을 구현하는 것은 사용자 경험을 향상시키는 데 도움이 될 수 있습니다. 이번 튜토리얼에서는 Beautiful Dnd 라이브러리를 사용하여 그리드 항목의 드래그 앤 드롭 기능을 구현하는 방법을 알아보겠습니다.

Beautiful Dnd 소개

Beautiful Dnd는 React에서 사용할 수 있는 드래그 앤 드롭 라이브러리입니다. 이 라이브러리는 높은 성능과 매끄러운 애니메이션을 제공하며, 간단한 설정만으로도 다양한 드래그 앤 드롭 기능을 구현할 수 있습니다.

Beautiful Dnd 설치

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

npm install react-beautiful-dnd

그리드 컴포넌트 생성

다음으로, 그리드 컴포넌트를 생성합니다. 예를 들어 Grid라는 컴포넌트를 만들어보겠습니다:

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

const Grid = () => {
  const items = ['아이템 1', '아이템 2', '아이템 3', '아이템 4'];

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

export default Grid;

그리드 항목 스타일링

그리드 항목의 스타일링을 원하는대로 변경할 수 있습니다. 예를 들어, 아이템을 그리드에 grid-template-columns을 사용하여 2x2 그리드로 배치하고, 항목의 배경색과 패딩을 설정할 수 있습니다:

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.item {
  background-color: #eee;
  padding: 10px;
  margin: 10px;
}

드래그 앤 드롭 이벤트 처리

드래그 앤 드롭 이벤트를 처리하기 위해 onDragStart, onDragUpdate, onDragEnd와 같은 이벤트 핸들러를 설정할 수 있습니다. 이 예제에서는 onDragEnd 이벤트를 처리하여 항목이 드롭될 때의 동작을 정의합니다. 예를 들어, 항목이 다른 위치로 이동한 경우 해당 위치의 인덱스를 변경하고 콘솔에 로그를 출력합니다:

// ...

const Grid = () => {
  // ...

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

    const reorderedItems = Array.from(items);
    const [removed] = reorderedItems.splice(result.source.index, 1);
    reorderedItems.splice(result.destination.index, 0, removed);

    console.log(reorderedItems);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      {/* ... */}
    </DragDropContext>
  );
}

// ...

완성된 그리드

이제 Beautiful Dnd를 사용하여 그리드 항목의 드래그 앤 드롭 기능을 구현했습니다. 이제 그리드 컴포넌트를 사용하여 원하는 곳에 렌더링할 수 있습니다:

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

const App = () => {
  return (
    <div>
      <h1>그리드 항목 드래그 앤 드롭 예제</h1>
      <Grid />
    </div>
  );
}

export default App;

이제 브라우저에서 애플리케이션을 실행하면 그리드 항목을 드래그 앤 드롭하여 재정렬할 수 있습니다.

마무리

이 튜토리얼에서는 Beautiful Dnd를 사용하여 그리드 항목의 드래그 앤 드롭 기능을 구현하는 방법을 알아보았습니다. Beautiful Dnd는 심플하고 성능이 우수한 드래그 앤 드롭 라이브러리로, 다양한 웹 애플리케이션에서 유용하게 사용될 수 있습니다. 추가로 라이브러리의 공식 문서를 참고하여 다양한 기능을 적용해보시길 권장합니다.