react-draggable은 간단한 드래그 기능을 제공하는 라이브러리입니다. 이 라이브러리는 드래그 가능한 요소를 쉽게 만들 수 있도록 도와주며, 드래그 이벤트를 간단하게 처리할 수 있는 API를 제공합니다. 설정이 간단하고 사용하기 쉬워 빠르게 드래그 기능을 구현할 수 있습니다.

react-dnd는 복잡한 드래그 앤 드롭 인터페이스를 구현할 수 있는 강력한 라이브러리입니다. 이 라이브러리는 드래그 소스와 드롭 타겟을 정의하고, 드래그 앤 드롭 작업의 상태를 세밀하게 제어할 수 있는 API를 제공합니다. 또한, 여러 종류의 드래그 앤 드롭 작업을 지원하며, 커스터마이징이 용이합니다.

react-zoom-pan-pinch는 드래그 앤 드롭 기능이 아닌 줌 및 팬 기능에 중점을 둔 라이브러리입니다. 이 라이브러리는 이미지나 콘텐츠에 줌, 팬, 핀치 제스처를 적용할 수 있게 해주며, 드래그 앤 드롭과는 다른 유형의 상호작용을 제공합니다.

react-draggable은 드래그 기능에 중점을 둔 라이브러리로, 줌 및 팬 기능은 기본적으로 제공하지 않습니다. 그러나 드래그 가능한 요소를 만들고, 드래그 이벤트를 처리하는 데 유용합니다.

react-dnd는 드래그 앤 드롭에 특화된 라이브러리로, 줌 및 팬 기능은 제공하지 않습니다. 이 라이브러리는 드래그 앤 드롭 작업을 세밀하게 제어할 수 있는 기능에 중점을 두고 있습니다.

react-zoom-pan-pinch는 줌 및 팬 기능에 특화된 라이브러리입니다. 이 라이브러리는 이미지나 콘텐츠에 줌, 팬, 핀치 제스처를 적용할 수 있게 해주며, 드래그 앤 드롭과는 다른 유형의 상호작용을 제공합니다.

react-draggable은 드래그 가능한 요소의 커스터마이징이 간단하지만, 드래그 앤 드롭 작업에 대한 세밀한 커스터마이징은 제한적입니다. 드래그 가능한 요소의 스타일과 동작을 쉽게 조정할 수 있지만, 드래그 앤 드롭 인터페이스 전체를 커스터마이징하는 데는 한계가 있습니다.

react-dnd는 드래그 앤 드롭 인터페이스를 세밀하게 커스터마이징할 수 있는 기능을 제공합니다. 드래그 소스와 드롭 타겟을 자유롭게 정의할 수 있으며, 드래그 앤 드롭 작업의 스타일과 동작을 세밀하게 조정할 수 있습니다.

react-zoom-pan-pinch는 줌 및 팬 기능에 대한 커스터마이징이 가능합니다. 줌 수준, 팬 영역, 핀치 제스처 등의 동작을 조정할 수 있으며, 이미지나 콘텐츠에 대한 커스터마이징이 용이합니다.

react-draggable은 마우스와 터치 기반의 드래그 제스처를 지원합니다. 이 라이브러리는 드래그 가능한 요소를 만들고, 다양한 입력 장치에서 드래그 작업을 처리할 수 있도록 도와줍니다.

react-dnd는 마우스와 터치 기반의 드래그 앤 드롭 제스처를 지원합니다. 이 라이브러리는 다양한 입력 장치에서 드래그 앤 드롭 작업을 처리할 수 있도록 설계되어 있습니다.

react-zoom-pan-pinch는 줌, 팬, 핀치 제스처를 지원하는 라이브러리입니다. 이 라이브러리는 터치 기반의 핀치 제스처를 포함하여, 다양한 제스처를 사용하여 콘텐츠를 탐색할 수 있도록 합니다.

드래그 예제

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

const App = () => {
  return (
    <Draggable>
      <div style={{ width: 100, height: 100, backgroundColor: 'lightblue' }}>
        드래그 가능한 박스
      </div>
    </Draggable>
  );
};

export default App;

드래그 앤 드롭 예제

import React from 'react';
import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

const ItemType = 'BOX';

const DraggableBox = () => {
  const [{ isDragging }, drag] = useDrag({
    type: ItemType,
    item: { id: 1 },
    collect: (monitor) => ({ isDragging: monitor.isDragging() }),
  });

  return (
    <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>
      드래그 박스
    </div>
  );
};

const DropZone = () => {
  const [{ isOver }, drop] = useDrop({
    accept: ItemType,
    drop: (item) => console.log(`드롭됨: ${item.id}`),
    collect: (monitor) => ({ isOver: monitor.isOver() }),
  });

  return (
    <div ref={drop} style={{ border: isOver ? '2px dashed green' : '2px solid gray' }}>
      드롭 존
    </div>
  );
};

const App = () => (
  <DndProvider backend={HTML5Backend}>
    <DraggableBox />
    <DropZone />
  </DndProvider>
);

export default App;

줌 및 팬 예제

import React from 'react';
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';

const App = () => {
  return (
    <TransformWrapper>
      <TransformComponent>
        <img src='your-image-url.jpg' alt='Zoomable' />
      </TransformComponent>
    </TransformWrapper>
  );
};

export default App;