React에서 파일 업로드 기능 구현하기

React 애플리케이션에서 파일 업로드 기능은 사용자로부터 이미지를 포함한 다양한 파일을 받아 서버로 전송하는 데 자주 사용됩니다. 이번 글에서는 실무에서 흔히 쓰이는 폼과 상태 관리를 활용해서 간단하게 파일 업로드 기능을 구현하는 방법을 다룹니다.

1. 기본적인 파일 업로드 폼 만들기

파일 업로드는 <input type="file" /> 요소를 사용합니다. React에서는 상태(state)를 활용해 사용자가 선택한 파일 정보를 관리합니다.

import React, { useState } from 'react';

function FileUpload() {
  const [file, setFile] = useState(null);

  const handleChange = (e) => {
    setFile(e.target.files[0]);
  };

  return (
    <div>
      <input type="file" onChange={handleChange} />
      {file && <p>선택된 파일: {file.name}</p>}
    </div>
  );
}

export default FileUpload;

2. 파일 데이터 서버에 전송하기

업로드를 위해선 FormData 객체를 사용하여 파일을 감싸고, fetch나 axios로 서버에 POST 요청을 보냅니다.

const handleUpload = async () => {
  if (!file) return;

  const formData = new FormData();
  formData.append('file', file);

  try {
    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
    });
    if (response.ok) {
      alert('업로드 성공');
    } else {
      alert('업로드 실패');
    }
  } catch (error) {
    console.error('업로드 중 에러:', error);
  }
};

전체 컴포넌트 예시는 다음과 같습니다.

import React, { useState } from 'react';

function FileUpload() {
  const [file, setFile] = useState(null);

  const handleChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleUpload = async () => {
    if (!file) return;

    const formData = new FormData();
    formData.append('file', file);

    try {
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });
      if (response.ok) {
        alert('업로드 성공');
      } else {
        alert('업로드 실패');
      }
    } catch (error) {
      console.error('업로드 중 에러:', error);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleChange} />
      {file && <p>선택된 파일: {file.name}</p>}
      <button onClick={handleUpload} disabled={!file}>업로드</button>
    </div>
  );
}

export default FileUpload;

3. 주의할 점

- 실제 서버 API 경로와 요청 방식을 확인하세요.
- 여러 파일 업로드 시 input에 multiple 속성을 추가하고 상태를 배열로 관리합니다.
- 파일 크기, 형식 제한 검증을 클라이언트와 서버 모두에서 수행해야 안전합니다.

이처럼 React에서 기본적인 파일 업로드 기능은 간단한 이벤트 처리와 FormData 활용으로 충분히 구현 가능합니다. 실무에서는 여기에 사용자 경험 개선을 위한 로딩 표시, 업로드 진행률 표시 등을 추가하는 경우가 많습니다.