[javascript] Beautiful Dnd를 사용하여 드래그 앤 드롭으로 요소 확대/축소하기

21 Nov 2023

javascript

이번에는 Beautiful Dnd 라이브러리를 사용하여 드래그 앤 드롭을 통해 요소를 확대하거나 축소하는 방법을 알아보겠습니다.

Beautiful Dnd란?

Beautiful Dnd는 React용 드래그 앤 드롭 라이브러리로, 사용자 친화적인 UI와 간단한 API를 제공합니다. 이 라이브러리를 사용하면 웹 애플리케이션에서 요소를 이동하거나 재정렬하는데 편리하게 사용할 수 있습니다.

요소 드래그 앤 드롭하기

먼저, Beautiful Dnd를 설치하고 React 컴포넌트에 라이브러리를 적용해야 합니다. 아래는 설치 및 적용하는 방법입니다:

npm install react-beautiful-dnd 명령어를 사용하여 Beautiful Dnd를 설치합니다.
React 컴포넌트 파일에서 Beautiful Dnd를 import합니다.

import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';

드래그 앤 드롭 기능을 적용할 요소를 Draggable 컴포넌트로 감싸줍니다.

const Item = () => {
  return (
    <Draggable draggableId="item-1" index={0}>
      {(provided, snapshot) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          // 요소 스타일 등 추가 설정
        >
          // 요소 컨텐츠
        </div>
      )}
    </Draggable>
  );
};

요소를 드롭할 위치를 설정하는 Droppable 컴포넌트를 추가합니다.

const Container = () => {
  return (
    <DragDropContext>
      <Droppable droppableId="droppable">
        {(provided, snapshot) => (
          <div
            ref={provided.innerRef}
            {...provided.droppableProps}
            // 컨테이너 스타일 등 추가 설정
          >
            // 요소들 추가
            <Item />
            <Item />
            // ...
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

여기까지 작성하면, 요소를 드래그하여 다른 위치로 이동시킬 수 있게 됩니다.

요소 확대/축소하기

이제 Beautiful Dnd를 사용하여 요소를 확대하거나 축소하는 방법을 알아보겠습니다.

먼저, 요소를 확대 또는 축소할 때 변경될 크기 정보를 관리해야 합니다. React 상태(state)를 사용하여 요소의 크기를 관리할 수 있습니다.

const [itemSize, setItemSize] = useState('normal');

확대/축소 버튼을 클릭할 때마다 요소의 크기를 변경하도록 이벤트 핸들러를 작성합니다.

const handleZoomIn = () => {
  setItemSize('large');
};

const handleZoomOut = () => {
  setItemSize('normal');
};

요소의 크기를 조정하는 부분을 수정합니다.

const Item = () => {
  return (
    <Draggable draggableId="item-1" index={0}>
      {(provided, snapshot) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          style={{ 
            width: itemSize === 'large' ? '200px' : '100px', 
            height: itemSize === 'large' ? '200px' : '100px', 
          }}
        >
          // 요소 컨텐츠
        </div>
      )}
    </Draggable>
  );
};

이제 확대/축소 버튼을 클릭하면 요소의 크기가 변경되는 것을 확인할 수 있습니다.

마무리

이번 포스트에서는 Beautiful Dnd를 사용하여 React 애플리케이션에서 드래그 앤 드롭으로 요소를 확대/축소하는 방법에 대해 알아보았습니다. Beautiful Dnd 라이브러리는 사용하기 쉽고 강력한 기능을 제공하여 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.

더 많은 정보를 알고 싶다면 Beautiful Dnd 공식 문서를 참고해보세요.