지난 주에 저는 React 애플리케이션에서 Beautiful Dnd를 사용하여 요소를 드래그 앤 드롭으로 클론하는 방법에 대해 알아보았습니다. 이번 글에서는 이를 자세히 다루고 예제 코드를 제공하겠습니다.
Beautiful Dnd란?
Beautiful Dnd는 React에서 드래그 앤 드롭 기능을 구현하기 위한 패키지입니다. 사용자가 화면 상의 요소를 드래그하여 다른 위치로 이동하거나, 요소를 클론하여 다른 위치에 놓을 수 있습니다.
이 패키지는 사용하기 쉽고, 성능이 우수하며, 다양한 커스터마이징이 가능하다는 특징을 가지고 있습니다.
드래그 앤 드롭으로 요소 클론하기
아래 예제 코드는 Beautiful Dnd를 사용하여 React 애플리케이션에서 드래그 앤 드롭으로 요소를 클론하는 방법을 보여줍니다.
import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
const items = [
{ id: 'item-1', content: '아이템 1' },
{ id: 'item-2', content: '아이템 2' },
{ id: 'item-3', content: '아이템 3' },
];
const App = () => {
const handleDragEnd = (result) => {
if (!result.destination) return;
// 요소 클론하기
const clonedItem = { ...items[result.source.index] };
items.splice(result.destination.index, 0, clonedItem);
// 상태 업데이트
setState({ items });
};
return (
<DragDropContext onDragEnd={handleDragEnd}>
<Droppable droppableId="droppable">
{(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>
)
};
export default App;
위의 예제 코드에서, items 배열은 렌더링할 요소들의 목록입니다. handleDragEnd 함수는 드래그 앤 드롭이 끝났을 때 호출되며, 클론된 요소를 배열에 추가하여 새로운 위치에 삽입합니다.
드롭 영역은 Droppable 컴포넌트로 감싸며, 각 요소는 Draggable 컴포넌트로 감싸져 드래그할 수 있습니다. 요소를 랜더링 할 때는 provided.innerRef, provided.draggableProps, provided.dragHandleProps와 같은 속성을 통해 Beautiful Dnd가 제공하는 기능을 사용할 수 있습니다.
결론
Beautiful Dnd를 사용하여 React 애플리케이션에 드래그 앤 드롭 기능을 구현하는 방법에 대해 알아보았습니다. 이를 사용하면 사용자 친화적이고 상호작용적인 UI를 구현할 수 있습니다.
더 자세한 내용은 Beautiful Dnd의 공식 문서를 참조하시기 바랍니다.