react-draggable은 기본적인 드래그 기능을 제공합니다. 드래그 가능한 요소를 쉽게 만들 수 있으며, 드래그 시작, 이동, 종료 이벤트를 처리할 수 있습니다.

react-resizable은 드래그를 통한 크기 조정 기능을 제공합니다. 드래그 핸들을 사용하여 요소의 크기를 조정할 수 있지만, 드래그 이동 기능은 없습니다.

react-grid-layout은 그리드 내에서 요소를 드래그할 수 있도록 지원합니다. 드래그 가능한 그리드 아이템을 만들 수 있으며, 그리드 레이아웃에 맞춰 자동으로 정렬됩니다.

react-draggable은 크기 조정 기능이 없습니다. 드래그 이동에만 초점을 맞추고 있습니다.

react-resizable은 크기 조정에 특화된 라이브러리로, 요소의 크기를 자유롭게 조정할 수 있습니다. 크기 조정 핸들을 제공하여 사용자가 직접 크기를 변경할 수 있습니다.

react-grid-layout은 드래그와 함께 크기 조정 기능을 제공합니다. 그리드 아이템의 크기를 조정할 수 있으며, 크기 조정 시 그리드 레이아웃이 자동으로 조정됩니다.

react-draggable은 그리드 레이아웃을 지원하지 않습니다. 드래그 가능한 요소를 만들 수 있지만, 레이아웃에 대한 제어는 없습니다.

react-resizable은 그리드 레이아웃을 지원하지 않습니다. 크기 조정 기능만 제공하며, 레이아웃에 대한 제어는 없습니다.

react-grid-layout은 그리드 레이아웃을 기본으로 합니다. 요소를 그리드 셀에 배치하고, 드래그 및 크기 조정을 통해 레이아웃을 동적으로 변경할 수 있습니다.

react-draggable은 드래그 가능한 요소의 위치와 동작을 사용자 정의할 수 있습니다. 드래그 핸들, 제한 영역, 드래그 이벤트 등을 쉽게 설정할 수 있습니다.

react-resizable은 크기 조정 핸들, 최소/최대 크기, 크기 조정 방향 등을 사용자 정의할 수 있습니다. 크기 조정 기능에 대한 세밀한 제어가 가능합니다.

react-grid-layout은 그리드 아이템의 크기, 위치, 레이아웃을 상세하게 사용자 정의할 수 있습니다. 그리드 시스템을 기반으로 하여, 보다 정교한 레이아웃 디자인이 가능합니다.

드래그 가능한 요소 예제

import React from 'react';
import Draggable from 'react-draggable';

function DraggableComponent() {
  return (
    <Draggable>
      <div style={{ width: 100, height: 100, backgroundColor: 'lightblue' }}>
        드래그 해보세요!
      </div>
    </Draggable>
  );
}

export default DraggableComponent;

크기 조정 가능한 요소 예제

import React from 'react';
import { ResizableBox } from 'react-resizable';
import 'react-resizable/css/styles.css';

function ResizableComponent() {
  return (
    <ResizableBox width={200} height={200} minConstraints={[100, 100]} maxConstraints={[300, 300]}>
      <div style={{ width: '100%', height: '100%', backgroundColor: 'lightblue' }}>
        크기를 조정해보세요!
      </div>
    </ResizableBox>
  );
}

export default ResizableComponent;

드래그 및 크기 조정 가능한 그리드 레이아웃 예제

import React from 'react';
import { WidthProvider, Responsive } from 'react-grid-layout';
const ResponsiveGridLayout = WidthProvider(Responsive);

function GridLayout() {
  const layout = [
    { i: 'a', x: 0, y: 0, w: 1, h: 2 },
    { i: 'b', x: 1, y: 0, w: 1, h: 2 },
    { i: 'c', x: 0, y: 2, w: 2, h: 1 },
  ];

  return (
    <ResponsiveGridLayout layout={layout} cols={{ lg: 2 }} rowHeight={30}>
      <div key="a" style={{ background: 'lightcoral' }}>A</div>
      <div key="b" style={{ background: 'lightgreen' }}>B</div>
      <div key="c" style={{ background: 'lightblue' }}>C</div>
    </ResponsiveGridLayout>
  );
}

export default GridLayout;