Suspense는 React의 기능 중 하나로, 컴포넌트가 비동기적으로 로딩되는 동안 로딩 상태를 관리할 수 있도록 도와줍니다. 파일 업로드의 경우, 파일이 업로드되는 동안 로딩 상태를 표시하는 것이 중요합니다.

먼저, Suspense 컴포넌트를 사용하기 위해 React 16.6 이상의 버전이 필요합니다. 그런 다음, 파일 업로드 로직을 수행하는 컴포넌트를 생성합니다.

import React, { Suspense } from 'react';

function FileUploadComponent() {
  return (
    <div>
      <input type="file" />
      <Suspense fallback={<div>Loading...</div>}>
        <UploadButton />
      </Suspense>
    </div>
  );
}

function UploadButton() {
  // 파일 업로드 로직 작성
  return <button>Upload</button>;
}

export default FileUploadComponent;

위의 예제에서는 <Suspense> 컴포넌트를 사용하여 파일 업로드 버튼을 감싸고, fallback prop으로 로딩 중일 때 표시할 로딩 상태를 지정합니다.

따라서, 파일이 업로드되는 동안 로딩 상태를 표시하는 컴포넌트가 로딩 중임을 알리는 방식으로 동작합니다.

여기서는 간단한 “Loading…“이라는 텍스트를 표시했지만, 원하는대로 로딩 상태를 디자인하고 구현할 수 있습니다.

Suspense를 사용하여 파일 업로드의 로딩 상태를 관리하면, 사용자에게 업로드가 진행 중임을 시각적으로 알리고, 업로드가 완료되면 자동으로 업로드 버튼을 활성화할 수 있습니다.

참고 자료: React 공식 문서 - Suspense