React에서 Drag-and-Drop API로 파일 순차 업로드 구현하기

React 애플리케이션에서 파일 업로드 기능을 구현할 때, Drag-and-Drop API를 활용하면 사용자 경험을 크게 향상시킬 수 있습니다. 특히 여러 파일을 순차적으로 업로드하는 기능은 서버 부하를 관리하는 데도 유용합니다.

1. Drag-and-Drop 기본 구성

HTML5 Drag-and-Drop API를 React에서 사용할 때는 이벤트 핸들러를 적절히 설정하여 드래그 및 드롭 이벤트를 관리해야 합니다.

function FileDropzone({ onFilesAdded }) {
  const handleDrop = (event) => {
    event.preventDefault();
    const files = Array.from(event.dataTransfer.files);
    onFilesAdded(files);
  };

  const handleDragOver = (event) => {
    event.preventDefault();
  };

  return (
    <div 
      onDrop={handleDrop} 
      onDragOver={handleDragOver} 
      style={{ border: '2px dashed #ccc', padding: '20px', textAlign: 'center' }}
    >
      파일을 여기에 드롭하세요
    </div>
  );
}

2. 파일 순차 업로드 로직

파일을 순차적으로 업로드하려면, 비동기 함수를 사용해 각 파일의 업로드가 완료된 후 다음 파일 업로드를 실행하도록 합니다.

async function uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file);

  const response = await fetch('/upload', {
    method: 'POST',
    body: formData,
  });

  if (!response.ok) {
    throw new Error(`파일 업로드 실패: ${file.name}`);
  }

  return response.json();
}

async function uploadFilesSequentially(files) {
  for (const file of files) {
    try {
      const result = await uploadFile(file);
      console.log(`${file.name} 업로드 성공`, result);
    } catch (error) {
      console.error(error);
    }
  }
}

3. 전체 컴포넌트 통합

드롭된 파일을 받아 순차적으로 업로드하는 과정을 처리하는 React 컴포넌트 예제입니다.

import React from 'react';

function FileUploader() {
  const handleFilesAdded = (files) => {
    uploadFilesSequentially(files);
  };

  return (
    <div>
      <h2>Drag-and-Drop 파일 순차 업로드</h2>
      <FileDropzone onFilesAdded={handleFilesAdded} />
    </div>
  );
}

export default FileUploader;

이렇게 구현하면 사용자가 여러 파일을 드래그앤드롭할 때, 각 파일을 순서대로 안전하게 서버에 업로드할 수 있습니다. 필요시 업로드 상태 표시, 취소 기능 등도 추가해보세요.