[typescript] 비동기 작업의 진행 상태를 표시하는 방법

14 Dec 2023

typescript

웹 애플리케이션에서 비동기 작업을 수행할 때 사용자에게 작업 진행 상태를 표시하는 것은 중요합니다. 이를 통해 사용자에게 작업이 진행 중인지 알리고, 작업이 완료되는 것을 기다릴 수 있도록 도와줄 수 있습니다.

1. 로딩 스피너 (Loading Spinner) 사용

로딩 스피너는 가장 일반적인 방법 중 하나입니다. 이 방법은 사용자에게 작업이 진행 중임을 시각적으로 보여주는 데 효과적입니다. 일반적으로 로딩 스피너는 fetch나 axios와 같은 HTTP 요청을 보낼 때나, 긴 시간이 걸리는 계산 작업을 수행할 때 사용됩니다.

예시 코드:

import React, { useState, useEffect } from 'react';
import Spinner from './Spinner'; // 로딩 스피너 컴포넌트

const App = () => {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetchData().then(() => setLoading(false));
  }, []);

  return (
    <div>
      {loading ? <Spinner /> : <YourContent />}
    </div>
  );
};

2. 상태 메시지 표시

로딩 스피너 외에도 상태 메시지를 표시하여 작업의 진행 상태를 사용자에게 전달할 수 있습니다. 예를 들어, “데이터를 불러오는 중…“이나 “작업을 처리하는 중…“과 같은 메시지를 표시하여 사용자가 어떤 작업이 진행 중인지 알 수 있도록 도와줄 수 있습니다.

예시 코드:

import React, { useState, useEffect } from 'react';

const App = () => {
  const [loadingMessage, setLoadingMessage] = useState('');

  useEffect(() => {
    setLoadingMessage('데이터를 불러오는 중...');
    fetchData().then(() => setLoadingMessage(''));
  }, []);

  return (
    <div>
      {loadingMessage && <p>{loadingMessage}</p>}
      <YourContent />
    </div>
  );
};

3. 프로그레스 바 (Progress Bar) 사용

긴 작업의 진행 상태를 사용자에게 시각적으로 표시하기 위해 프로그레스 바를 사용할 수도 있습니다. 이 방법은 작업이 얼마나 진행되었는지를 퍼센트로 나타내어 사용자에게 진행 상황을 이해하기 쉽게 돕습니다.

예시 코드:

import React, { useState, useEffect } from 'react';
import ProgressBar from './ProgressBar'; // 프로그레스 바 컴포넌트

const App = () => {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      if (progress < 100) {
        setProgress(prev => prev + 10);
      } else {
        clearInterval(interval);
      }
    }, 1000);
  }, []);

  return <ProgressBar progress={progress} />;
};

이러한 방법들을 사용하여 웹 애플리케이션에서 비동기 작업의 진행 상태를 효과적으로 표시할 수 있습니다.

이상입니다. 원하시는 경우 자세한 내용을 더 알려주세요.