폴링 사용하기

import { useState, useEffect } from 'react';

function BasicPolling() {
	const [data, setData] = useState(null);
	const [loading, setLoading] = useState(true);
	const [error, setError] = useState(null);
	const [lastUpdate, setLastUpdate] = useState(null);

	// API 호출 함수
	const fetchData = async () => {
		try {
			setError(null);
			// 실제로는 여러분의 API 엔드포인트를 사용하세요
			const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
			const result = await response.json();
			
			setData(result);
			setLastUpdate(new Date());
			setLoading(false);
		} catch (err) {
			setError(err.message);
			setLoading(false);
		}
	};

	useEffect(() => {
		// 컴포넌트 마운트 시 즉시 데이터 가져오기
		fetchData();
		
		// 5초마다 폴링
		const intervalId = setInterval(() => {
			fetchData();
		}, 5000);
	
		// 컴포넌트 언마운트 시 인터벌 정리 (중요!)
		return () => {
			clearInterval(intervalId);
		};
	}, []); // 빈 의존성 배열 = 컴포넌트 마운트 시에만 실행

	return (
		// ... 
	)
}

export default BasicPolling;

const poll = async () => {
	try {
		await fetchData(); // 완료까지 대기
	} catch (error) {
		console.error(error);
	}
	
	// 완료 후 다음 폴링 스케줄
	setTimeout(poll, delay);
};

const poll = async () => {
	const startTime = Date.now();
	await fetchData();
	const responseTime = Date.now() - startTime;
	
	// 응답 시간에 따라 동적 조절
	const delay = responseTime > 2000 ? 10000 : 5000;
	setTimeout(poll, delay);
};

const poll = async () => {
	const result = await fetchData();
	
	// 특정 조건에서 폴링 중지
	if (result.status === 'completed') {
		return; // 폴링 종료
	}
	
	// 조건에 따라 다른 간격
	const delay = result.status === 'processing' ? 2000 : 5000;
	setTimeout(poll, delay);
};

const result = await requestLocalAuthentication({
	funnelId: 28,
	alwaysAuthenticate: true,
});

if (result === true) {
	pollingStatus.current = 'POLLING';
	const intervalData: { retried: number; registered: boolean | null } = { retried: 0, registered: null };

	while (intervalData.retried < 5 && intervalData.registered !== true) {
		try {
			const result = await fetchCreditAgreementStatus();

			intervalData.registered = result.registered;
		} catch {
			intervalData.retried += 1;
		}

		await delay(500);
	}

	if (intervalData.registered === true) {
		pollingStatus.current = 'FINISHED';
		onSuccess();
	}
} else {
	openAlert({ title: t`오류가 발생했어요. \n잠시 후 다시 시도해주세요.` });
}

const { data } = useQuery({
	queryKey: ['data'],
	queryFn: fetchData,
	refetchInterval: 5000, // 5초마다 폴링
});