[React-query] refetch 옵션과 사용법 총 정리

 

 

 

🤷‍♂️ 본론에 앞서

---

react-query는 React에서 데이터를 가져오고, 캐싱하고, 동기화하고, 데이터 관리를 위한 후크와 유틸리티를 제공하는 라이브러리입니다. 이 라이브러리의 활용은 React의 전반적인 성능을 향상시키고 사용자에게 부드러운 경험을 줄 수 있습니다.

 

react-query 사용법에 대해 알아보기

https://cometruedream.tistory.com/130

React-query 상태 관리

 

react-query 데이터 프리페칭 사용법에 대해 알아보기

https://cometruedream.tistory.com/251

[React-query] 데이터 프리페칭 사용법 정리

 

 

 

🤷‍♂️ refetch란 무엇인가?

---

refetch는 캐시에 저장된 데이터가 stale 상태인 경우, 즉 만료된 데이터(stale 상태)가 refetch 옵션의 조건을 충족하면, 해당 데이터를 서버에서 다시 가져와 최신화합니다.

 

간단히 말하면

💡 만료된 데이터를 최신 데이터로 업데이트합니다.

 

중요한 refetch 옵션

• refetchOnMount
  • 이 옵션은 boolean 타입을 가지며, 화면이 마운트(React 라이프사이클)될 때 데이터를 다시 가져와야 하는지 여부를 결정합니다. false로 설정하면 화면이 마운트 될 때 데이터를 자동으로 다시 가져오지 않습니다. 반면에, true로 설정하면 컴포넌트가 마운트 될 때 데이터를 자동으로 다시 가져와 최신화합니다.
• refetchOnWindowFocus
  • 이 옵션은 boolean 타입을 가지며, 화면이 focus 될 때 데이터를 다시 가져올지 결정합니다. false로 설정하면 창이 focus 되어도 데이터를 다시 가져오지 않습니다. 반면에, true로 설정하면 화면이 렌더링 되거나 브라우저 탭이나 화면을 전환할 때 focus 되므로, 데이터를 자동으로 다시 최신화합니다 (예: true 설정 시 탭이나 화면 전환에 따라 데이터가 바뀔 수 있어 사용자가 당황할 수 있음).
• refetchOnReconnect
  • 이 옵션은 boolean 타입을 가지며, 네트워크 상태가 좋지 않을 때 유용합니다. false로 설정하면 네트워크 재연결이 발생해도 데이터를 다시 가져오지 않습니다. 반면에, true로 설정하면 네트워크 재연결을 감지하면 데이터를 자동으로 최신화합니다.
• refetchInterval
  • 이 옵션은 staleTime, cacheTime과 동일하게 정수 타입을 가지며, refetchInterval: 60000은 1분을 의미합니다. 이 옵션과 시간을 설정하면 데이터를 자동으로 최신화합니다.

총 4개의 refetch 옵션이 있으며, refetchOnMount, refetchOnWindowFocus, refetchOnReconnect 옵션의 초기값은 true입니다. 서비스에 맞게 재설정하면 됩니다.

 

🤷‍♂️ refetch란 무엇인가?

---

1. useQuery 예제

const { data = fallback } = useQuery([queryKeys.treatments], getTreatments, {
  staleTime: 6000, // 1분
  cacheTime: 30000, // 5분 (cacheTime의 기본값은 5분이며, cacheTime은 staleTime보다 짧아서는 안됩니다)
  refetchOnMount: false,
  refetchOnWindowFocus: false,
  refetchOnReconnect: false,
});

 

위의 예제 코드에서 화면 렌더링 시, 화면이 포커스 될 때, 네트워크가 재연결될 경우에 옵션을 false로 설정하였으며, staleTime은 1분, cacheTime은 5분으로 설정하였습니다.

 

주의할 점!

cacheTime은 staleTime보다 짧게 설정하는 것은 권장하지 않습니다.

 

보충 설명!

staleTime은 만료된 데이터를 의미합니다. cacheTime이 staleTime보다 짧으면, cacheTime이 만료되면서 새로운 데이터를 버리고 stale 데이터를 사용하게 됩니다. 이로 인해 데이터가 일관성을 잃어 사용자에게 혼란을 줄 수 있습니다.

 

2. 전역 refetch 예제

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 600000, // 10분
      cacheTime: 900000, // 15분
      refetchOnMount: false,
      refetchOnReconnect: false,
      refetchOnWindowFocus: false,
    },
  },
});

 

useQuery에만 옵션을 설정할 수 있는 것이 아니라, QueryClient에서 전역으로 옵션을 설정할 수도 있습니다.

 

refetch 옵션 오버라이딩

전역으로 설정한 옵션을 오버라이딩하려면 오버라이딩하고자 하는 useQuery 부분에서 위의 useQuery 예제처럼 옵션을 설정하면 됩니다.

 

폴링 기법을 이용한 자동 refetch

 

폴링 기법이란 무엇인가요?

💡 리얼타임 웹을 위한 기법으로, 일정한 주기로 서버와 응답을 주고받는 방식을 폴링 기법이라고 합니다.

 

 

위의 예제에서 옵션을 설정하면 일정한 주기로 refetch를 수행합니다.

refetchInterval: 60000 // 1분마다 자동으로 refetch

 

🤷‍♂️ 마무리하면서..

---

react-query를 활용하면 react의 성능을 향상시키고 사용자에게 더 좋은 경험을 제공할 수 있습니다. 또한, refetch에 대해 자세히 알아보면서 react-query를 더욱 효과적으로 활용하는 방법을 배웠습니다.

 

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리

 

 

https://cometruedream.tistory.com/250

[자바스크립트] 활용가치가 좋은 내장함수와 every(), some() 함수의 개념 및 활용법