보기 좋고 사용하기 쉬운 인터페이스를 가진 정렬 가능한 리스트는 많은 웹 애플리케이션에서 필요한 요소 중 하나입니다. 이러한 리스트를 만들기 위해 React 라이브러리의 Beautiful DND(Drag and Drop)를 사용할 수 있습니다. Beautiful DND는 드래그 앤 드롭과 같은 사용자 상호 작용을 구현하기에 적합한 라이브러리입니다.
Beautiful DND 설치하기
먼저 Beautiful DND 를 설치해야 합니다. 아래 명령어를 사용하여 Beautiful DND 패키지를 설치할 수 있습니다.
npm install react-beautiful-dnd
설치가 완료되면 Beautiful DND를 사용할 수 있습니다.
정렬 가능한 리스트 만들기
리스트를 정렬 가능한 리스트로 만들기 위해서는 다음 단계를 따라야 합니다.
- Beautiful DND 컴포넌트 임포트하기
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
- 리스트 아이템과 드래그 앤 드롭 컴포넌트 생성하기
<DragDropContext>
<Droppable droppableId="list">
{(provided) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}
>
{listItems.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>
여기서 listItems 배열은 리스트의 아이템들을 담고 있으며, 각 아이템은 id와 content 프로퍼티를 가지고 있어야 합니다.
- 드래그 앤 드롭 이벤트 처리하기
Beautiful DND는 드래그 앤 드롭 이벤트를 처리하기 위해 onDragEnd 이벤트 핸들러를 제공합니다. 여기서 마지막 드롭 위치를 업데이트할 수 있습니다.
const handleDragEnd = (result) => {
if (!result.destination) {
return;
}
const items = Array.from(listItems);
const [reorderedItem] = items.splice(result.source.index, 1);
items.splice(result.destination.index, 0, reorderedItem);
setListItems(items);
};
- 드래그 앤 드롭 이벤트 핸들러 연결하기
<DragDropContext> 컴포넌트의 onDragEnd 프로퍼티에 이벤트 핸들러를 연결하여 드래그 앤 드롭 이벤트를 처리할 수 있습니다.
<DragDropContext onDragEnd={handleDragEnd}>
...
</DragDropContext>
- 스타일링하기
Beautiful DND를 사용하여 생성한 리스트는 기본적으로 스타일링이 없으므로, 개발자가 원하는 대로 스타일을 추가할 수 있습니다.
마무리
이번 포스트에서는 Beautiful DND를 사용하여 정렬 가능한 리스트를 만드는 방법을 알아보았습니다. 이러한 기능은 다양한 웹 애플리케이션에서 사용하기에 유용하며, Beautiful DND는 많은 커스터마이징 가능한 옵션을 제공합니다. Beautiful DND의 문서를 참조하여 더 많은 기능을 알아보세요.
References:
이제 Beautiful DND를 사용하여 멋진 정렬 가능한 리스트를 만들어 보세요!