메인 콘텐츠로 건너뛰기

마이그레이션 가이드

다른 인기 업로드 라이브러리에서 Dropup으로 마이그레이션하는 방법입니다.

react-dropzone에서 마이그레이션​

react-dropzone은 인기 있는 드래그 앤 드롭 라이브러리입니다. Dropup은 내장된 업로드 지원과 함께 유사한 기능을 제공합니다.

이전 (react-dropzone)​

import { useDropzone } from 'react-dropzone';

function OldUploader() {
  const [files, setFiles] = useState([]);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    accept: { 'image/*': [] },
    maxSize: 10485760,
    onDrop: (acceptedFiles) => {
      setFiles(acceptedFiles.map(file => ({
        ...file,
        preview: URL.createObjectURL(file),
      })));
    },
  });

  const handleUpload = async () => {
    for (const file of files) {
      const formData = new FormData();
      formData.append('file', file);
      await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });
    }
  };

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {isDragActive ? <p>여기에 드롭</p> : <p>파일을 여기로 드래그</p>}
    </div>
  );
}

이후 (Dropup)​

import { useDropup } from '@samithahansaka/dropup';

function NewUploader() {
  const { files, actions, state, getDropProps, getInputProps } = useDropup({
    accept: 'image/*',
    maxSize: 10 * 1024 * 1024,
    upload: { url: '/api/upload' },  // 내장 업로드!
  });

  return (
    <div {...getDropProps()}>
      <input {...getInputProps()} />
      {state.isDragging ? <p>여기에 드롭</p> : <p>파일을 여기로 드래그</p>}

      {files.map(file => (
        <div key={file.id}>
          {file.preview && <img src={file.preview} />}
          <span>{file.progress}%</span>
        </div>
      ))}

      <button onClick={() => actions.upload()}>업로드</button>
    </div>
  );
}

주요 차이점​

react-dropzoneDropup
getRootProps()getDropProps()
isDragActivestate.isDragging
accept: { 'image/*': [] }accept: 'image/*'
업로드 지원 없음진행률을 포함한 내장 업로드
수동 미리보기 정리자동 정리

react-uploady에서 마이그레이션​

react-uploady는 여러 컴포넌트가 포함된 기능이 풍부한 업로드 라이브러리입니다.

이전 (react-uploady)​

import Uploady, { useItemProgressListener, useUploady } from '@rpldy/uploady';
import UploadDropZone from '@rpldy/upload-drop-zone';

function OldApp() {
  return (
    <Uploady destination={{ url: '/api/upload' }}>
      <UploadDropZone onDragOverClassName="drag-over">
        <div>파일을 여기에 드롭</div>
      </UploadDropZone>
      <UploadProgress />
    </Uploady>
  );
}

function UploadProgress() {
  useItemProgressListener((item) => {
    console.log(`${item.file.name}: ${item.completed}%`);
  });

  const { processPending } = useUploady();

  return <button onClick={processPending}>업로드</button>;
}

이후 (Dropup)​

import { useDropup } from '@samithahansaka/dropup';

function NewApp() {
  const { files, actions, getDropProps, getInputProps } = useDropup({
    upload: { url: '/api/upload' },
    onUploadProgress: (file, progress) => {
      console.log(`${file.name}: ${progress}%`);
    },
  });

  return (
    <div {...getDropProps()}>
      <input {...getInputProps()} />
      <div>파일을 여기에 드롭</div>

      {files.map(file => (
        <div key={file.id}>
          {file.name}: {file.progress}%
        </div>
      ))}

      <button onClick={() => actions.upload()}>업로드</button>
    </div>
  );
}

주요 차이점​

react-uploadyDropup
Provider + Components단일 훅
useItemProgressListeneronUploadProgress 콜백
processPending()actions.upload()
여러 패키지올인원

react-dropzone-uploader에서 마이그레이션​

react-dropzone-uploader는 드롭존과 업로드 기능을 결합합니다.

이전 (react-dropzone-uploader)​

import Dropzone from 'react-dropzone-uploader';
import 'react-dropzone-uploader/dist/styles.css';

function OldUploader() {
  const getUploadParams = () => ({ url: '/api/upload' });

  const handleChangeStatus = ({ meta, file }, status) => {
    console.log(status, meta, file);
  };

  return (
    <Dropzone
      getUploadParams={getUploadParams}
      onChangeStatus={handleChangeStatus}
      accept="image/*"
      maxSizeBytes={10485760}
    />
  );
}

이후 (Dropup)​

import { useDropup } from '@samithahansaka/dropup';

function NewUploader() {
  const { files, getDropProps, getInputProps } = useDropup({
    accept: 'image/*',
    maxSize: 10 * 1024 * 1024,
    upload: { url: '/api/upload' },
    autoUpload: true,

    onUploadStart: (file) => console.log('업로드 중', file),
    onUploadComplete: (file) => console.log('완료', file),
    onUploadError: (file, err) => console.log('오류', file, err),
  });

  return (
    <div {...getDropProps()}>
      <input {...getInputProps()} />
      {/* 커스텀 UI */}
    </div>
  );
}

주요 차이점​

react-dropzone-uploaderDropup
내장 UI를 가진 컴포넌트Headless (자체 UI 제공)
getUploadParamsupload 옵션
onChangeStatus특정 콜백
CSS import 필요스타일 없음

Uppy에서 마이그레이션​

Uppy는 완전한 기능을 갖춘 업로드 툴킷입니다.

이전 (Uppy)​

import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import XHRUpload from '@uppy/xhr-upload';
import '@uppy/core/dist/style.css';
import '@uppy/dashboard/dist/style.css';

const uppy = new Uppy()
  .use(Dashboard, { inline: true, target: '#uppy' })
  .use(XHRUpload, { endpoint: '/api/upload' });

uppy.on('upload-success', (file, response) => {
  console.log('성공:', file, response);
});

function OldUploader() {
  return <div id="uppy" />;
}

이후 (Dropup)​

import { useDropup } from '@samithahansaka/dropup';

function NewUploader() {
  const { files, actions, state, getDropProps, getInputProps } = useDropup({
    upload: { url: '/api/upload' },
    onUploadComplete: (file, response) => {
      console.log('성공:', file, response);
    },
  });

  return (
    <div>
      <div {...getDropProps()}>
        <input {...getInputProps()} />
        파일을 여기에 드롭
      </div>

      {files.map(file => (
        <div key={file.id}>
          {file.preview && <img src={file.preview} />}
          <span>{file.name}</span>
          <span>{file.progress}%</span>
        </div>
      ))}

      <button onClick={() => actions.upload()}>업로드</button>
    </div>
  );
}

주요 차이점​

UppyDropup
전체 UI 포함Headless
플러그인 시스템올인원
더 큰 번들< 10KB
명령형 APIReact hooks

일반적인 마이그레이션 단계​

1. Dropup 설치​

npm uninstall react-dropzone react-uploady @rpldy/uploady  # 이전 것 제거
npm install @samithahansaka/dropup

2. Import 업데이트​

// 이전
import { useDropzone } from 'react-dropzone';

// 이후
import { useDropup } from '@samithahansaka/dropup';

3. Hook 사용 업데이트​

// 이전
const { getRootProps, getInputProps, isDragActive } = useDropzone({...});

// 이후
const { getDropProps, getInputProps, state } = useDropup({...});
// isDragActive 대신 state.isDragging 사용

4. 업로드 설정 추가​

// Dropup은 업로드 기능을 포함합니다
useDropup({
  upload: { url: '/api/upload' },
});

5. 이벤트 핸들러 업데이트​

// 이전 (react-dropzone)
onDrop: (files) => {...}

// 이후 (Dropup)
onFilesAdded: (files) => {...}
onUploadComplete: (file) => {...}

6. 템플릿 업데이트​

// 이전
<div {...getRootProps()}>
  <input {...getInputProps()} />
</div>

// 이후
<div {...getDropProps()}>
  <input {...getInputProps()} />
</div>

기능 비교​

기능react-dropzonereact-uploadyUppyDropup
드래그 앤 드롭✓✓✓✓
업로드✗✓✓✓
진행률✗✓✓✓
청크 분할✗✓✓✓
tus✗✓✓✓
클라우드 (S3)✗✓✓✓
React Native✗✗✗✓
번들 크기~10KB~30KB~100KB+<10KB
TypeScript✓✓✓✓
Headless✓부분적✗✓