많은 웹 프로젝트에서는 사용자들이 화면의 요소들을 드래그 앤 드롭으로 이동시킬 수 있는 기능이 필요합니다. 이를 위해서 React 라이브러리에서 제공하는 Beautiful Dnd를 사용할 수 있습니다. Beautiful Dnd는 사용자 친화적인 드래그 앤 드롭 기능을 쉽게 구현할 수 있도록 도와줍니다.
Beautiful Dnd란?
Beautiful Dnd는 React를 위한 드래그 앤 드롭 라이브러리입니다. Draggable과 Droppable 컴포넌트를 통해 요소를 드래그하고 드롭할 수 있으며, 원하는 대로 사용자 정의가 가능합니다. Beautiful Dnd는 널리 사용되며, 개발자들에게 널리 인정받는 라이브러리입니다.
설치하기
먼저 프로젝트에 Beautiful Dnd를 설치해야 합니다. 다음 명령을 사용하여 설치할 수 있습니다:
npm install react-beautiful-dnd
사용 방법
Beautiful Dnd를 사용하려면 다음과 같은 단계를 따르면 됩니다:
- Draggable 컴포넌트로 드래그 가능한 항목을 만듭니다.
- Droppable 컴포넌트로 드롭 가능한 영역을 만듭니다.
- onDragEnd() 핸들러를 구현하여 드래그 앤 드롭 종료 시 실행될 함수를 작성합니다.
예시 코드
import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
// 드래그 가능한 항목
const items = [
{ id: 'item-1', content: 'Item 1' },
{ id: 'item-2', content: 'Item 2' },
{ id: 'item-3', content: 'Item 3' },
];
const App = () => {
// 드래그 앤 드롭 종료 시 실행되는 함수
const onDragEnd = (result) => {
// 드롭한 위치에 대한 로직을 구현합니다.
};
return (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable">
{(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef}>
{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>
);
};
export default App;
위 예시 코드는 Beautiful Dnd를 사용하여 드래그 앤 드롭 기능을 화면에 구현하는 간단한 예시입니다. onDragEnd() 핸들러에서는 드롭한 위치에 대한 로직을 작성할 수 있습니다.
Beautiful Dnd에는 추가적인 커스터마이징 옵션과 기능들이 많이 존재하므로, 공식 문서를 참고하여 자세한 사용 방법을 익히는 것을 권장합니다.
마무리
Beautiful Dnd는 React를 사용하는 프로젝트에서 드래그 앤 드롭 기능을 쉽게 구현할 수 있는 좋은 옵션입니다. 예시 코드를 통해 기본적인 사용 방법을 알아보았는데, 더 나아가서 Beautiful Dnd의 다양한 기능들을 활용하여 사용자 친화적인 드래그 앤 드롭 화면을 구현해보시기 바랍니다.