Beautiful Dnd(Beautiful Drag and Drop)는 리액트 애플리케이션에서 사용자 인터페이스 요소를 드래그 앤 드롭으로 만들기 위한 라이브러리입니다. 이 라이브러리를 사용하면 쉽게 사용자 인터페이스 요소를 드래그하여 다른 위치로 이동시킬 수 있습니다.
Beautiful Dnd 설치하기
Beautiful Dnd를 설치하기 위해 다음 명령을 사용합니다:
npm install react-beautiful-dnd
Beautiful Dnd 사용하기
Beautiful Dnd를 사용하기 위해서는 다음 세 가지 주요 요소를 작성해야 합니다.
-
DragDropContext: 이 컴포넌트는 드래그 앤 드롭 기능을 사용할 컴포넌트의 부모 컴포넌트에 추가합니다. -
Droppable: 이 컴포넌트는 드롭 가능한 영역을 나타내며, 드래그될 수 있는 요소들을 감싸줍니다. -
Draggable: 이 컴포넌트는 드래그될 수 있는 요소를 나타내며, 드롭 가능한 영역 내에서 드래그 앤 드롭 될 수 있도록 설정합니다.
아래는 Beautiful Dnd를 사용하여 간단한 드래그 앤 드롭 기능을 가진 사용자 인터페이스 요소를 만드는 예제입니다.
import React, { Component } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
class App extends Component {
state = {
items: [
{ id: '1', content: '아이템 1' },
{ id: '2', content: '아이템 2' },
{ id: '3', content: '아이템 3' },
],
};
onDragEnd = (result) => {
if (!result.destination) {
return;
}
const items = Array.from(this.state.items);
const [reorderedItem] = items.splice(result.source.index, 1);
items.splice(result.destination.index, 0, reorderedItem);
this.setState({ items });
};
render() {
return (
<DragDropContext onDragEnd={this.onDragEnd}>
<Droppable droppableId="droppable">
{(provided) => (
<ul
{...provided.droppableProps}
ref={provided.innerRef}
>
{this.state.items.map((item, index) => (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided) => (
<li
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
>
{item.content}
</li>
)}
</Draggable>
))}
{provided.placeholder}
</ul>
)}
</Droppable>
</DragDropContext>
);
}
}
export default App;
위 예제에서 items state는 드래그 앤 드롭 가능한 아이템들을 나타냅니다. onDragEnd 핸들러는 드래그 앤 드롭이 끝났을 때 실행되며, 아이템들의 순서를 업데이트합니다.
결론
Beautiful Dnd를 사용하면 쉽게 드래그 앤 드롭 기능을 가진 사용자 인터페이스 요소를 만들 수 있습니다. 이 라이브러리는 리액트 애플리케이션에서 인터랙티브한 드래그 앤 드롭 기능을 구현하는 데 도움을 줍니다.
더 자세한 정보를 원하시면, Beautiful Dnd 공식 문서를 참고하시기 바랍니다.