파일 업로드는 웹 애플리케이션에서 자주 사용되는 기능 중 하나입니다. 하지만 대용량 파일을 업로드할 때는 시간이 오래 걸리고 사용자 경험에 영향을 주는 문제가 발생할 수 있습니다. 이러한 문제를 해결하기 위해 비동기적인 업로드를 구현할 수 있습니다. 그리고 React의 Suspense 기능을 활용하면 업로드 과정에서 로딩 상태를 관리할 수 있습니다.

1. React Suspense 소개

React Suspense는 React 16.6 버전부터 도입된 기능으로, 비동기 작업을 처리할 때 로딩 상태를 관리하는 데 도움이 됩니다. Suspense를 사용하면 컴포넌트 트리의 계층 구조에서 하위 컴포넌트들이 데이터를 로드하는 동안 로딩 상태 표시를 할 수 있습니다.

2. 파일 업로드 예제

다음은 React와 Suspense를 사용하여 비동기적으로 파일 업로드하는 간단한 예제입니다.

import React, { Suspense } from 'react';

const FileUploader = () => {
  const handleUpload = async (file) => {
    // 파일 업로드 API 호출
    await uploadFile(file);
  };

  return (
    <div>
      <h1>파일 업로드</h1>
      <Suspense fallback={<div>파일을 업로드 중입니다...</div>}>
        <FileInput onUpload={handleUpload} />
      </Suspense>
    </div>
  );
};

const FileInput = ({ onUpload }) => {
  const handleChange = (event) => {
    const file = event.target.files[0];
    onUpload(file);
  };

  return (
    <input type="file" onChange={handleChange} />
  );
};

const uploadFile = (file) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      // 파일 업로드 로직
      console.log(`업로드 완료: ${file.name}`);
      resolve();
    }, 2000);
  });
};

위 예제에서는 FileUploader 컴포넌트에서 파일 업로드를 처리합니다. Suspense 컴포넌트를 사용하여 FileInput 컴포넌트의 로딩 상태를 관리하고, onUpload 콜백 함수를 통해 실제 파일 업로드 작업을 수행합니다.

3. 예제 설명

위 예제에서는 uploadFile 함수가 파일 업로드를 가정하고, 비동기 작업을 처리하기 위해 setTimeout을 사용합니다. FileInput 컴포넌트에서 파일 선택 시 onUpload 콜백 함수를 호출하여 선택한 파일을 FileUploader 컴포넌트로 전달합니다.

Suspense 컴포넌트의 fallback 속성은 로딩 중일 때 보여줄 JSX를 설정합니다. 이 예제에서는 단순한 텍스트로 “파일을 업로드 중입니다…” 메시지를 표시하였습니다.

4. 결론

React Suspense를 사용하여 비동기적으로 파일 업로드를 처리할 수 있습니다. 로딩 상태를 쉽게 관리하여 사용자에게 직관적인 경험을 제공할 수 있습니다. Suspense를 이용하면 파일 업로드 외에도 다양한 비동기 작업을 처리할 수 있으므로, 활용해보는 것을 권장합니다.

조금 더 자세한 내용은 React 공식 문서를 참고하시기 바랍니다.

[작성자 이름] - #Tech #React