📌 기능 요약

• 특정 분(00, 15, 30, 45분)마다 자동으로 refetch를 실행하는 훅
• 여러 개의 refetch 함수를 배열로 받아 한 번에 실행 가능
• 자동으로 다음 실행 시간을 계산하여 주기적으로 호출

---

🛠 구현 방식

1. 다음 실행 시각 계산
   • 현재 분과 초를 가져와 minutes 배열에서 가장 가까운 다음 분을 찾음
   • 현재보다 미래의 분이 없으면, 다음 시간(hour)의 첫 번째 분으로 설정
   • 남은 시간(ms) 계산 후 setTimeout으로 예약
2. 자동 실행
   • 예약된 시간이 되면 모든 refetch 함수 실행
   • 실행 후 다시 scheduleNextRefetch() 호출하여 다음 예약을 설정
3. 효율적인 타이머 관리
   • 기존 타이머가 있으면 clearTimeout으로 제거 후 새로 설정
   • useEffect에서 minutes가 변경될 때마다 타이머를 초기화하여 재계산

---

💡 훅

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import { useCallback, useEffect, useRef } from "react";

interface UseScheduledRefetchProps {
  refetch: (() => void)[]; // refetch 함수들의 배열
  minutes: number[];
}

const useScheduledRefetch = ({
  refetch,
  minutes,
}: UseScheduledRefetchProps) => {
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);

  // 다음 리패치 시간을 계산하는 함수
  const scheduleNextRefetch = useCallback(() => {
    if (minutes.length === 0) return; // minutes가 비어있으면 리턴

    const now = new Date();
    const currentMinute = now.getMinutes();
    const currentSecond = now.getSeconds();

    // 현재보다 미래인 가장 가까운 분 찾기
    let nextMinute = minutes.find((m) => m > currentMinute);

    // 현재 시간 이후에 실행할 분이 없으면 다음 시간의 첫 번째 분으로 설정
    if (!nextMinute) {
      nextMinute = minutes[0];
    }

    // 다음 실행까지 남은 시간(ms) 계산
    let msUntilNext;
    if (nextMinute > currentMinute) {
      // 같은 시간 내 다음 분
      msUntilNext = ((nextMinute - currentMinute) * 60 - currentSecond) * 1000;
    } else {
      // 다음 시간의 첫 분 (예: 현재 45분이고 다음은 00분)
      msUntilNext =
        ((60 - currentMinute + nextMinute) * 60 - currentSecond) * 1000;
    }

    // 이전 타이머 정리
    if (timeoutRef.current) clearTimeout(timeoutRef.current);

    timeoutRef.current = setTimeout(() => {
      // 모든 refetch 함수 실행
      refetch.forEach((fn) => fn());
      scheduleNextRefetch(); // 다음 리패치 예약
    }, msUntilNext);
  }, [minutes, refetch]);

  useEffect(() => {
    // minutes가 바뀌면 즉시 다음 스케줄 재계산
    scheduleNextRefetch();

    // 정리 함수
    return () => {
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
    };
  }, [scheduleNextRefetch, minutes]);

  return null;
};

export default useScheduledRefetch

💡 활용 예시

1
2
3
4
5
6
7
const { data, refetch } = useQuery("fetchData", fetchDataFn);
const { data: chartData, refetch: chartRefetch } = useQuery("fetchChart", fetchChartFn);

useScheduledRefetch({
  refetch: [refetch, chartRefetch],
  minutes: [0, 15, 30, 45],
});

---

✅ 특징 및 장점

• 재사용성 증가: refetch 함수를 배열로 받아 여러 요청을 한 번에 처리 가능
• 코드 중복 감소: 여러 곳에서 훅을 사용할 필요 없이 한 번만 선언
• 자동 스케줄링: 매 시각 00, 15, 30, 45분에 맞춰 호출됨
• 타이머 관리 최적화: 기존 타이머를 정리하고 새로운 타이머를 설정하여 메모리 누수 방지

---

⚠️주의

• 해당 리액트 쿼리 속성중 refetchInterval 은 해제 요망