[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} />;
};
이러한 방법들을 사용하여 웹 애플리케이션에서 비동기 작업의 진행 상태를 효과적으로 표시할 수 있습니다.
이상입니다. 원하시는 경우 자세한 내용을 더 알려주세요.