refetchInterval

React Query에서 제공하는 refetchInterval, refetchOnReconnect, refetchIntervalInBackground는 쿼리 재요청(Refetch) 동작을 제어하는 옵션입니다. 각각의 옵션은 쿼리를 언제, 어떻게 다시 가져올지를 정의합니다. 아래에서 상세히 설명하겠습니다.

---

1. refetchInterval

• 역할: 주기적으로 데이터를 다시 가져오기(Refetch)를 실행합니다.
• 타입: number | false (기본값: false)
  • number: 밀리초 단위로 주기를 설정합니다.
  • false: 주기적인 재요청을 비활성화합니다.
• 사용 예: 실시간으로 데이터를 업데이트해야 하는 경우.

작동 방식

• 주어진 밀리초 간격으로 데이터를 자동으로 다시 가져옵니다.
• 이 설정은 데이터가 stale(오래된) 상태가 아니더라도 요청을 실행합니다.

예제

useQuery('example', fetchData, {
  refetchInterval: 5000, // 5초마다 데이터를 다시 가져오기
});

• 위 코드는 5초마다 API를 호출하여 데이터를 갱신합니다.

---

2. refetchOnReconnect

• 역할: 네트워크 연결이 다시 활성화될 때 데이터를 다시 가져옵니다.
• 타입: boolean (기본값: true)
  • true: 네트워크가 다시 연결되면 쿼리를 재요청합니다.
  • false: 네트워크 연결 여부에 관계없이 자동으로 재요청하지 않습니다.

작동 방식

• 네트워크가 끊겼다가 다시 연결되었을 때, 해당 옵션이 활성화되어 있으면 데이터를 다시 가져옵니다.
• React Query는 네트워크 상태를 감지하기 위해 브라우저의 Navigator API를 사용합니다(navigator.onLine).

예제

useQuery('example', fetchData, {
  refetchOnReconnect: true, // 네트워크 연결 복구 시 데이터를 다시 가져오기
});

• 사용자가 네트워크를 다시 연결하면 React Query가 자동으로 데이터를 재요청합니다.

적용 시점

• 사용자 환경에서 네트워크 연결이 불안정한 경우 유용합니다.
• 예: 모바일 애플리케이션에서 사용자가 Wi-Fi를 다시 연결했을 때 데이터를 자동으로 동기화.

---

3. refetchIntervalInBackground

• 역할: 브라우저가 백그라운드 상태에 있을 때도 refetchInterval을 유지할지 결정합니다.
• 타입: boolean (기본값: false)
  • true: 브라우저가 백그라운드 상태여도 데이터를 주기적으로 가져옵니다.
  • false: 브라우저가 백그라운드 상태일 경우, refetchInterval이 일시 중지됩니다.

작동 방식

• 브라우저가 백그라운드 상태로 전환되었는지 확인하기 위해 Document Visibility API를 사용합니다 (document.hidden).
• 기본적으로 브라우저가 백그라운드에 있을 때는 네트워크 요청을 줄이기 위해 refetchInterval을 멈춥니다. 하지만 이 옵션을 활성화하면 브라우저가 백그라운드 상태에서도 주기적으로 데이터를 가져옵니다.

예제

useQuery('example', fetchData, {
  refetchInterval: 5000, // 5초마다 데이터 갱신
  refetchIntervalInBackground: true, // 백그라운드 상태에서도 갱신
});

• 위 설정에서는 브라우저가 백그라운드 상태일 때도 5초마다 데이터를 가져옵니다.

적용 시점

• 실시간 데이터가 매우 중요할 때(예: 주식 가격, 실시간 알림 등).
• 네트워크 요청이 빈번하게 발생하므로 사용 시 주의가 필요합니다.

---

옵션 간의 상호작용

refetchInterval과 refetchIntervalInBackground

• refetchInterval이 활성화되어 있어야 refetchIntervalInBackground가 의미를 가집니다.
• refetchIntervalInBackground: false이면, 브라우저가 백그라운드 상태일 때 refetchInterval이 일시 중지됩니다.
• 두 옵션을 함께 사용하여 데이터를 주기적으로 업데이트하면서 네트워크 부하를 제어할 수 있습니다.

refetchOnReconnect와 refetchInterval

• 두 옵션은 독립적으로 작동합니다.
• refetchOnReconnect는 네트워크 상태 변화를 기준으로 동작하며, refetchInterval은 주기적인 데이터 요청을 기준으로 동작합니다.
• 예를 들어, refetchInterval이 5초로 설정되어 있다면, 네트워크가 끊겼다가 복구된 시점에 즉시 데이터를 요청합니다.

---

실제 사용 예제

실시간 데이터 갱신 예제

주식 가격 데이터를 실시간으로 가져오고, 백그라운드 상태에서도 데이터를 주기적으로 갱신합니다.

useQuery('stockPrices', fetchStockPrices, {
  refetchInterval: 1000, // 1초마다 데이터 갱신
  refetchIntervalInBackground: true, // 백그라운드 상태에서도 갱신
});

모바일 애플리케이션 예제

네트워크 연결이 끊겼다가 다시 연결될 때 데이터를 자동으로 가져옵니다.

useQuery('userProfile', fetchUserProfile, {
  refetchOnReconnect: true, // 네트워크 복구 시 자동으로 데이터 요청
});

네트워크 최적화 예제

• 10초마다 데이터를 갱신하되, 백그라운드 상태에서는 데이터 요청을 멈춥니다.
• 네트워크 연결 복구 시에도 데이터를 자동으로 동기화합니다.

useQuery('dashboardData', fetchDashboardData, {
  refetchInterval: 10000, // 10초마다 데이터 갱신
  refetchIntervalInBackground: false, // 백그라운드 상태에서는 갱신 중지
  refetchOnReconnect: true, // 네트워크 복구 시 데이터 동기화
});

---

옵션 비교

옵션 기본값 역할 사용 사례

refetchInterval	false	데이터를 주기적으로 다시 가져오기	실시간 업데이트(예: 주식, 실시간 알림)
refetchOnReconnect	true	네트워크 연결이 복구되면 데이터를 다시 가져오기	모바일 환경에서 네트워크 연결 복구 시 데이터 동기화
refetchIntervalInBackground	false	백그라운드 상태에서도 데이터를 주기적으로 가져오기	브라우저 백그라운드에서도 실시간 업데이트가 필요한 경우

---

결론

• refetchInterval: 주기적으로 데이터를 갱신해야 할 때 사용.
• refetchOnReconnect: 네트워크 복구 시 자동으로 데이터를 다시 가져오기.
• refetchIntervalInBackground: 브라우저가 백그라운드 상태여도 주기적인 갱신을 유지.

이 세 가지 옵션을 상황에 맞게 조합하여 실시간 데이터 처리 및 네트워크 최적화를 구현할 수 있습니다.