드래그 앤 드롭 기능은 사용자에게 직관적인 인터페이스를 제공하고 사용성을 향상시킬 수 있는 강력한 기능입니다. React 라이브러리에서 가장 인기있는 드래그 앤 드롭 라이브러리 중 하나인 react-beautiful-dnd는 이러한 기능을 구현하는데 매우 효과적입니다. 이번 블로그에서는 react-beautiful-dnd를 사용하여 요소를 드래그 앤 드롭하여 스케일을 변경할 때 가능성을 제한하는 방법에 대해 알아보겠습니다.
1. react-beautiful-dnd 설치하기
먼저 react-beautiful-dnd 라이브러리를 설치해야 합니다. 이를 위해 프로젝트 디렉토리에서 다음 명령을 실행합니다:
npm install react-beautiful-dnd
2. 필요한 컴포넌트 구성하기
react-beautiful-dnd를 사용하기 위해 드래그 앤 드롭 가능한 영역과 드래그할 수 있는 개별 요소를 구성해야 합니다.
import React from "react";
import { Draggable, Droppable, DragDropContext } from "react-beautiful-dnd";
const App = () => {
const items = [
{ id: "item1", name: "Item 1" },
{ id: "item2", name: "Item 2" },
{ id: "item3", name: "Item 3" }
];
return (
<DragDropContext>
<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.name}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
);
};
export default App;
이 예시 코드에서는 DragDropContext, Droppable, Draggable 컴포넌트를 사용하여 드롭 영역과 드래그 가능한 요소를 구성합니다. items 배열은 드래그 앤 드롭 되는 개별 요소들을 나타내는 데이터입니다.
3. 스케일 변경 가능성 제한하기
react-beautiful-dnd는 Draggable 컴포넌트에 여러 속성을 제공하여 요소의 드래그 및 드롭 동작을 커스터마이징할 수 있도록 합니다. 우리가 원하는 것은 요소를 드래그 앤 드롭하여 스케일을 변경하는 것이므로 해당 기능을 추가해 보겠습니다.
<Draggable
key={item.id}
draggableId={item.id}
index={index}
onMouseDown={(event) => event.stopPropagation()}
>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
transform: `scale(${snapshot.isDragging ? 1.1 : 1})`,
transition: "transform 0.2s"
}}
onMouseDown={(event) => event.stopPropagation()}
>
{item.name}
</div>
)}
</Draggable>
위의 코드에서 onMouseDown 이벤트 핸들러를 사용하여 요소를 클릭했을 때 부모 요소에 이벤트 전파를 중지합니다. 그리고 드래그가 시작될 때 요소의 크기를 조정하기 위해 transform 스타일 속성을 사용하여 스케일을 변경합니다. snapshot.isDragging 속성은 현재 요소가 드래그 중인지 여부를 나타내는 값입니다. 스케일이 변경되는 동안의 전환 효과를 위해 transition 스타일 속성을 설정합니다.
위의 코드를 적용하면 드래그 앤 드롭 중인 요소의 크기가 확대되는 효과를 확인할 수 있습니다.
결론
이번 튜토리얼에서는 react-beautiful-dnd를 사용하여 드래그 앤 드롭으로 요소의 스케일을 변경하는 방법에 대해 알아보았습니다. onMouseDown 이벤트 핸들러를 사용하여 요소를 클릭했을 때 부모 요소에 이벤트 전파를 중지하고, snapshot 값을 통해 드래그 중인지 여부를 확인하여 스케일을 조절했습니다. 이러한 방식으로 드래그 앤 드롭 액션의 시각적인 가능성을 제한할 수 있습니다.
참고 문서: