[javascript] Beautiful Dnd를 사용하여 드래그 앤 드롭 애니메이션 적용하기

21 Nov 2023

javascript

드래그 앤 드롭 기능은 사용자에게 직관적인 인터페이스와 편리한 사용성을 제공합니다. Beautiful Dnd는 React.js에서 드래그 앤 드롭 기능을 구현할 수 있게 도와주는 라이브러리입니다.

이 튜토리얼에서는 Beautiful Dnd를 사용하여 드래그 앤 드롭 애니메이션을 적용하는 방법을 알아보겠습니다.

1. Beautiful Dnd 설치하기

먼저 Beautiful Dnd를 설치해야 합니다. 다음 명령어를 사용하여 Beautiful Dnd를 프로젝트에 추가합니다.

npm install react-beautiful-dnd

2. Beautiful Dnd 사용하기

Beautiful Dnd를 사용하기 위해 다음과 같이 필요한 컴포넌트를 import합니다.

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

DragDropContext는 드래그 앤 드롭 기능을 감싸는 최상위 컴포넌트입니다. Droppable은 드롭 가능한 영역을 정의하는 컴포넌트이며, Draggable은 드래그 가능한 아이템을 정의하는 컴포넌트입니다.

3. DragDropContext 설정하기

DragDropContext는 드래그 앤 드롭 이벤트를 처리하기 위한 설정을 정의합니다. 다음과 같이 DragDropContext 컴포넌트를 사용하여 설정을 정의합니다.

<DragDropContext onDragEnd={handleDragEnd}>
  {/* 드래그 앤 드롭 기능이 적용될 영역 */}
</DragDropContext>

onDragEnd 함수는 드래그 앤 드롭이 완료되었을 때 실행될 콜백 함수를 정의합니다. 이 함수 내에서 드래그 앤 드롭 이벤트의 결과를 처리할 수 있습니다.

4. Droppable 영역 생성하기

Droppable은 드롭 가능한 영역을 생성하는 컴포넌트입니다. Droppable 컴포넌트 중에서도 가장 많이 사용되는 것은 Droppable 입니다.

다음과 같이 Droppable 컴포넌트를 사용하여 드롭 가능한 영역을 생성합니다.

<Droppable droppableId="droppable">
  {(provided, snapshot) => (
    <div
      ref={provided.innerRef}
      style={getListStyle(snapshot.isDraggingOver)}
    >
      {/* 드래그 앤 드롭 가능한 아이템들을 정의 */}
    </div>
  )}
</Droppable>

droppableId는 Droppable 영역을 식별하기 위한 고유한 ID입니다. provided와 snapshot 매개변수는 Beautiful Dnd에서 제공하는 기능을 활용하기 위한 객체입니다.

5. Draggable 아이템 생성하기

Draggable은 드래그 가능한 아이템을 생성하는 컴포넌트입니다. 다음과 같이 Draggable 컴포넌트를 사용하여 드래그 가능한 아이템을 생성합니다.

<Draggable draggableId="draggable">
  {(provided, snapshot) => (
    <div
      ref={provided.innerRef}
      {...provided.draggableProps}
      {...provided.dragHandleProps}
      style={getItemStyle(
        snapshot.isDragging,
        provided.draggableProps.style
      )}
    >
      {/* 드래그 앤 드롭 아이템의 내용 */}
    </div>
  )}
</Draggable>

draggableId는 Draggable 아이템을 식별하기 위한 고유한 ID입니다. provided와 snapshot 매개변수는 Beautiful Dnd에서 제공하는 기능을 활용하기 위한 객체입니다.

6. 스타일링과 애니메이션 적용하기

Beautiful Dnd는 드래그 앤 드롭 애니메이션을 자동으로 처리해줍니다. 아이템이 드래그되거나 영역 위에 드롭되는 경우, 자동으로 애니메이션이 적용됩니다.

개별 아이템과 영역의 스타일링은 style 객체를 사용하여 지정할 수 있습니다. 다음과 같이 간단한 예제 스타일링 함수를 정의합니다.

const getItemStyle = (isDragging, draggableStyle) => ({
  // 드래그 중인 경우 스타일 변경
  background: isDragging ? 'lightgreen' : 'grey',
  ...draggableStyle,
});

const getListStyle = (isDraggingOver) => ({
  // 드롭 영역 스타일 변경
  background: isDraggingOver ? 'lightblue' : 'lightgrey',
});

위에서 정의한 스타일 함수를 앞서 생성한 Draggable 아이템과 Droppable 영역에 적용합니다.

7. 결과 확인하기

위의 단계를 완료하고 서버를 실행한 후, 브라우저에서 페이지를 열어 드래그 앤 드롭 애니메이션을 확인해보세요.

Beautiful Dnd는 React.js에서 드래그 앤 드롭 기능을 쉽게 구현할 수 있도록 도와줍니다. 위의 단계를 따라가면서 Beautiful Dnd를 사용하여 드래그 앤 드롭 애니메이션을 구현할 수 있습니다.

참고 자료

Beautiful Dnd 공식 문서