React-Query를 사용하며

• 이번 프로젝트에서 처음으로 React-Query에 대해 공부하고, 프로젝트에 적용했다. 적용하면서 미숙했던 부분들이 쌓이고 쌓여 에러로 발견된 것들도 많았다,,, 그래서 이번 기회에 해당 문제들을 되집어보면서 react-query에 대해 다시 공부해보려고 한다!
• React-Query를 사용하며 좋은 유저 경험을 상승시킬 수 있다 생각했다. 내가 기존에 만들었던 프로젝트 경우에는 데이터의 캐싱이 존재하지 않아 **컴포넌트가 mount 되었을 때 api 요청이 진행되고 요청 중 unMount가 발생하면 해당 요청을 취소해주는 식으로 불필요한 요청을 줄였다.**→ 이에 따른 사용자의 대기시간이 발생할 수 있었다. React-Query를 이용하여 staleTime과 cacheTime을 적절히 조절하면 캐싱을 통해 유저의 대기시간을 줄일 수 있었다. 또한 prefetch 혹은 refetch 등을 통해 유저가 접근할 수 있는 사이트에 대해 미리 데이터를 패칭 시켜 유저에게 대기시간을 없앨 수 있다는 장점이 있다.
• React-Query를 사용하면서 가장 많이 생각했던 부분은 프로젝트의 흐름이였다. 어느 지점에서 refetch가 발생해야하는 지, 어떤 데이터는 언제까지가 fresh한 데이터여야 할 지, 혹은 refetch가 언제 진행되어야 할 지 등 프로젝트의 전체 흐름과 이해를 제대로 잡아놓지 않았다면, React-Query를 사용하면서도 어려운 부분이 발생했을 것 같다.

React-Query

역할, 동작 흐름

• 클라이언트에서 서버 데이터 캐시를 관리하는 용도이다.
• 서버 데이터 요청 시 fetch 나 Axios를 통해 바로 서버로 전달되는 것이 아닌 React-Query에 캐시를 요청한다(클라이언트 설정환경에 따라 다르지만)
• 데이터 관리 ⇒ React-query , 데이터 업데이트 ⇒ 사용자
• 따라서 클라이언트에서 데이터를 요청하기 전 React-Query의 상태를 요청하고 StaleTime, cacheTime 등을 고려하여 데이터 fetching을 진행하게 된다.
• StaleTime 은 데이터가 fresh 상태를 유지하는 시간이며, 지난 이후 데이터는 cacheTime에 속하게 된다. cacheTime은 staleTime이 지난 후 만약 데이터가 요청되면 cacheTime이 지나지 않고 해당 쿼리키에 속하는 데이터를 우선 보여주게 된다. 이때 데이터의 refetch가 일어나게 되고 업데이트 된 데이터로 교체되게 된다. → 새로운 데이터를 수집할 동안 빈화면을 보여주는 것보다 우선 데이터를 보여주는 것이 훨씬 낫다는 이유이다.
• 캐싱 및 데이터의 기준은 QueryKey가 맡게 된다. 따라서 작업 하는 내내 QueryKey를 이용하여 데이터를 캐싱하고, refetching, invalidate 등 작업을 진행했다.

Default Option

• Deafault Option을 지정하기 전 현재 프로젝트의 특성에 대해 이해해야 됐다.
• 이번 프로젝트의 경우는 다른 사용자와의 커뮤니티가 존재하지 않으며, 사용자가 특정 작업을 하지 않는 이상 데이터가 업데이트 되지 않는 다. ex) 인터뷰 진행으로 인한 데이터 생성, 로그인을 통한 상태 변경 등
• 따라서 staleTime,cacheTime을 각각 10분과 15분으로 잡아준 후 특정 작업이 발생했을 경우에 데이터를 refetching 해주는 것이 불필요한 요청도 줄이고, 유저의 대기시간을 줄이는 방법이라고 생각했다.
• 또한, 특성 상 마운트가 다시 되었을 때도, 데이터의 변경이 존재하지 않는다. 따라서 refetchOnMount : false를 사용해주었다

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 600000,
      cacheTime: 900000,
      refetchOnMount: false,
      refetchOnWindowFocus: false,
      refetchOnReconnect: false,
      retry: 1,
    },
  },
});

QueryKey