react-draggable은 요소를 드래그할 수 있는 기본 기능을 제공합니다. 드래그 가능한 영역, 제한, 드래그 이벤트 등을 쉽게 설정할 수 있습니다.

react-resizable은 드래그를 통한 크기 조정에 특화되어 있으며, 드래그 핸들을 사용하여 요소의 크기를 조정할 수 있습니다. 드래그 기능은 크기 조정에만 집중되어 있습니다.

react-moveable은 드래그 기능 외에도 크기 조정, 회전, 기울이기 등의 다양한 변형 기능을 제공합니다. 여러 가지 변형을 동시에 적용할 수 있어, 보다 복잡한 상호작용이 가능합니다.

react-draggable은 크기 조정 기능을 제공하지 않습니다. 드래그 기능에만 집중하고 있습니다.

react-resizable은 크기 조정에 특화된 라이브러리로, 크기 조정 핸들을 제공하여 사용자가 요소의 너비와 높이를 조정할 수 있습니다. 크기 조정 기능이 가장 강력합니다.

react-moveable은 크기 조정 기능을 포함하고 있으며, 드래그와 함께 크기를 조정할 수 있습니다. 크기 조정 핸들을 사용하여 요소의 크기를 조정할 수 있습니다.

react-draggable은 회전 기능을 제공하지 않습니다. 드래그와 크기 조정에만 집중하고 있습니다.

react-resizable은 회전 기능을 제공하지 않습니다. 크기 조정에만 집중하고 있습니다.

react-moveable은 회전 기능을 포함하고 있으며, 요소를 드래그하면서 회전시킬 수 있습니다. 회전 핸들을 사용하여 요소를 자유롭게 회전시킬 수 있습니다.

react-draggable은 드래그 가능한 요소와 드래그 이벤트를 커스터마이징할 수 있습니다. 드래그 제한, 드래그 시작/종료 이벤트 등을 설정할 수 있습니다.

react-resizable은 크기 조정 핸들의 스타일과 동작을 커스터마이징할 수 있습니다. 핸들의 크기, 모양, 색상 등을 변경할 수 있으며, 크기 조정 제한도 설정할 수 있습니다.

react-moveable은 드래그, 크기 조정, 회전 등 모든 변형 기능을 커스터마이징할 수 있습니다. 핸들의 스타일, 변형 제한, 이벤트 핸들러 등을 자유롭게 설정할 수 있습니다.

드래그 가능한 요소 예시

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

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

export default DraggableExample;

크기 조정 가능한 요소 예시

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

function ResizableExample() {
  return (
    <Resizable
      width={200}
      height={200}
      onResize={(e, { size }) => {
        console.log('New size:', size);
      }}
      handle={(h) => (
        <span
          className={`handle handle-${h}`}
          style={{
            background: 'blue',
            width: '10px',
            height: '10px',
            position: 'absolute',
            right: h === 'e' ? 0 : undefined,
            bottom: h === 's' ? 0 : undefined,
            cursor: h === 'e' ? 'ew-resize' : 'ns-resize',
          }}
        />
      )}
    >
      <div style={{ width: '100%', height: '100%', background: 'lightcoral' }}>
        크기 조정 해보세요!
      </div>
    </Resizable>
  );
}

export default ResizableExample;

드래그, 크기 조정, 회전 예시

import React from 'react';
import Moveable from 'react-moveable';

function MoveableExample() {
  const moveableRef = React.useRef(null);

  return (
    <div>
      <div ref={moveableRef} style={{ width: '100px', height: '100px', background: 'lightgreen' }}>
        Moveable 요소
      </div>
      <Moveable
        target={moveableRef.current}
        draggable={true}
        resizable={true}
        rotatable={true}
        onDrag={(_, { target, transform }) => {
          target.style.transform = transform;
        }}
        onResize={(_, { target, width, height }) => {
          target.style.width = `${width}px`;
          target.style.height = `${height}px`;
        }}
        onRotate={(_, { target, transform }) => {
          target.style.transform = transform;
        }}
      />
    </div>
  );
}

export default MoveableExample;