[javascript] Beautiful Dnd를 사용하여 드래그 앤 드롭으로 요소 크기 조절하기

21 Nov 2023

javascript

소개

Beautiful Dnd는 React 애플리케이션에서 드래그 앤 드롭 기능을 구현하는 데 도움을 주는 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 화면에서 요소를 드래그하여 위치를 변경하거나 크기를 조절할 수 있습니다.

설치

먼저, Beautiful Dnd를 설치해야 합니다. 다음 명령을 사용하여 패키지를 설치합니다:

npm install beautiful-react-dnd

또는 yarn을 사용하는 경우:

yarn add beautiful-react-dnd

사용법

먼저, Beautiful Dnd의 DndProvider 컴포넌트를 애플리케이션의 최상위 컴포넌트에 추가합니다:

import { DndProvider } from 'beautiful-react-dnd';

function App() {
  return (
    <DndProvider>
      {/* 애플리케이션 컴포넌트 */}
    </DndProvider>
  );
}

다음으로, 크기를 조절할 요소를 정의합니다. 이 예제에서는 <ResizableBox> 컴포넌트를 사용합니다:

import { ResizableBox } from 'react-resizable';

function MyResizableBox() {
  const [width, setWidth] = useState(200);
  const [height, setHeight] = useState(200);

  const handleResize = (event, { size }) => {
    setWidth(size.width);
    setHeight(size.height);
  };

  return (
    <ResizableBox
      width={width}
      height={height}
      onResize={handleResize}
    >
      {/* 내용 */}
    </ResizableBox>
  );
}

마지막으로, 요소를 드래그하여 크기를 조절할 수 있도록 만들어 줍니다. 이를 위해 <Draggable> 컴포넌트를 사용합니다:

import { Draggable } from 'beautiful-react-dnd';

function MyDraggableResizableBox() {
  const [width, setWidth] = useState(200);
  const [height, setHeight] = useState(200);
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);

  const handleResize = (event, { size }) => {
    setWidth(size.width);
    setHeight(size.height);
  };

  const handleDrag = (event, { x, y }) => {
    setX(x);
    setY(y);
  };

  return (
    <Draggable
      onDrag={handleDrag}
    >
      <ResizableBox
        width={width}
        height={height}
        onResize={handleResize}
      >
        {/* 내용 */}
      </ResizableBox>
    </Draggable>
  );
}

결론

Beautiful Dnd를 사용하면 React 애플리케이션에서 쉽게 드래그 앤 드롭 및 요소 크기 조절 기능을 구현할 수 있습니다. 위의 예제 코드를 사용하여 시작해보세요!

소개

설치

사용법

결론

참고 자료