프론트엔드 개발에서 드래그 앤 드롭 기능은 매우 유용합니다. 이 기능을 사용하면 사용자가 웹 애플리케이션에서 요소를 끌어서 다른 위치로 이동시킬 수 있습니다. Beautiful Dnd는 React에서 드래그 앤 드롭 기능을 구현할 수 있는 강력한 라이브러리 중 하나입니다. 이번 예제에서는 Beautiful Dnd를 사용하여 헬스 케어 앱의 디자인을 구현해보겠습니다.
Beautiful Dnd 설치하기
Beautiful Dnd를 사용하기 위해서는 우선 패키지를 설치해야 합니다. 다음 명령을 사용하여 Beautiful Dnd를 설치합니다.
npm install react-beautiful-dnd
기능 구현하기
이번 예제에서는 헬스 케어 앱에서 운동 리스트를 드래그 앤 드롭하여 다른 순서로 재정렬하는 기능을 구현해보겠습니다.
먼저, ExerciseList 컴포넌트를 생성하고, react-beautiful-dnd에서 제공하는 DragDropContext, Droppable, Draggable 컴포넌트를 사용하여 운동 리스트를 렌더링합니다.
import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
const ExerciseList = () => {
const exercises = [
{ id: '1', name: 'Push-ups' },
{ id: '2', name: 'Squats' },
{ id: '3', name: 'Plank' },
{ id: '4', name: 'Lunges' },
];
const onDragEnd = () => {
// 드래그 앤 드롭 종료 시 실행되는 로직
};
return (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="exerciseList">
{(provided) => (
<ul {...provided.droppableProps} ref={provided.innerRef}>
{exercises.map((exercise, index) => (
<Draggable key={exercise.id} draggableId={exercise.id} index={index}>
{(provided) => (
<li
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
{exercise.name}
</li>
)}
</Draggable>
))}
{provided.placeholder}
</ul>
)}
</Droppable>
</DragDropContext>
);
};
위의 코드에서 exerciseList는 Droppable 컴포넌트가 받아들일 수 있는 드롭 영역의 식별자입니다. onDragEnd 함수는 드래그 앤 드롭 종료 시 실행될 로직을 구현할 수 있는 곳입니다.
Droppable 컴포넌트 내부에서는 provided를 사용하여 드롭 영역을 만들고, Draggable 컴포넌트를 사용하여 각 운동을 렌더링합니다. Draggable 컴포넌트는 드래그 가능한 요소를 생성해줍니다.
마지막으로, ExerciseList 컴포넌트를 원하는 컴포넌트로 렌더링하면 드래그 앤 드롭 기능이 적용된 헬스 케어 앱을 볼 수 있습니다.
마치며
Beautiful Dnd는 드래그 앤 드롭 기능을 구현하기 위한 강력한 라이브러리입니다. 이번 예제에서는 헬스 케어 앱에서 운동 리스트를 드래그 앤 드롭하여 재정렬할 수 있는 기능을 구현해보았습니다. Beautiful Dnd는 다양한 옵션을 제공하므로, 필요에 따라 세부적인 커스터마이징이 가능합니다.
더 많은 기능을 알고 싶다면 Beautiful Dnd 공식 문서를 참고해보세요.
참고 자료: