[개발 일지] React성능 최적화 (2) : React Query의 캐싱 기능

📚 1. 사전 지식

React Query와 Stale

출처

React Query는 기본적으로 캐싱된 data를 stale 한 상태로 여긴다

# stale : 신선하지 않은. 신선하다 함은, 서버에서 조회한 데이터는 그때 당시의 데이터 snapshot이고, 외부 요청으로 서버 데이터가 변경이 되었다면 내 브라우저가 가진 데이터는 오래된 낡은 데이터가 되었으므로 stale 하다고 말하는 것

stale 한 상태가 되면 다음의 경우 refetch 된다.

1. 새로운 query instance가 마운트 될 때 : 즉, page를 이동했다가 왔을 때

2. 브라우저 화면을 이탈했다가 다시 focus 할 때

3. 네트워크가 다시 연결될 때

4. 특별히 refetchInterval(시간 간격)을 설정한 경우

또한, query에 별다른 action이 없으면 inactive상태로 캐시에 남아 있다가 5분 후 메모리에서 사라진다. cacheTime옵션을 설정하여 이 시간을 조정할 수 있다.

staleTime

: 데이터가 fresh -> stale상태로 변경되는 데 걸리는 시간

DefaultValue는 0이다. fresh 상태일 때는 페이지를 이동했다가 돌아왔을 경우에도 fetch 되지 않는다. 데이터가 한번 fetch 되고 staleTime이 지나지 않았다면 unmount 후 mount가 발생해도 다시 fetch 되지 않는다. defaultValue가 0이기 때문에 받아오는 즉시 stale 하다고 판단하여 캐싱 데이터와 무관하게 계속 fetching을 수행한다. 

cacheTime

: 데이터가 inactive상태일 때 캐싱된 상태로 남아있는 시간

쿼리 인스턴스가 unmount 되면 데이터는 inactive 상태로 변경되며, 캐시는 cacheTime만큼 유지된다. 이걸 cacheTime만큼 유지시키는 이유는 쿼리 인스턴스가 다시 마운트 되면 데이터를 fetch 하는 동안 cacheTime이 지나지 않은 캐시 데이터를 보여준다. cacheTime이 지나면 가비지 콜렉터로 수집된다.

• staleTime과 cacheTime의 defaultValue = 0과 5분

 

---

🤩 2. 실제로 구현하기

1. 프로필 화면의 현 상황

React Developer Tool의 'Hightlight updates when components render'를 켜고 촬영한 화면이다. 렌더링이 정말 자주 일어남을 알 수 있다. 페이지 이동 후에 계속 번쩍이며 렌더링 되는 것은 다른 화면을 눌렀다가, 이 페이지를 눌렀을 때 다시 렌더링 되는 현상이다. react-query의 설정 때문에 그러한 거 같아서 확인해 보았다.

 

2. React Query의 캐싱

포커스 할 경우 알림 컴포넌트만 리렌더링이 일어남을 확인할 수 있다. 위 방식이 아니면, React Query의 캐싱 기능을 활용하여 리렌더링을 최소화할 수도 있다.

// pages/app.tsx
...
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
      suspense: true,
      useErrorBoundary: true,
      staleTime: 1000 * 3,
      cacheTime: 1000 * 5,
    },
    mutations: { retry: false, useErrorBoundary: true },
  },
});
...

위와 같이 staleTime과 cacheTime으로 설정할 경우, 

이전처럼 화면을 focus 할 때마다 refetch가 일어나는 것이 아니라, 데이터가 fresh상태에서 stale상태로 변경되는 시간, 즉 staleTime=3초가 지나지 않았다면 refetch가 일어나지 않는다. 이러한 캐싱 기능이 데이터 양이 적어서 이런 소규모 프로젝트에서는 문제가 되지 않겠지만, 대규모 프로젝트에 가면 상당히 유용할 것이라 생각한다.

---

🤔 2. 느낀 점 / 배운 점 / 추가로 공부할 것

React Query는 참 배우면 배울수록 깊이가 있는 라이브러리라는 것을 알게 되었다. 앞으로 다른 사람들은 React Query를 어떻게 사용했는지 살펴보고, 공식문서를 통해 더욱 깊이 있게 학습해야겠다.

 

queries의 staleTime, cacheTime 외의 옵션

1. refetchOnWindowFocus : 데이터가 stale 상태일 경우 윈도 포커싱이 될 때 refetch 실행 옵션을 정할 수 있음
▶ default : true
2. refetchOnMount : 데이터가 stale 상태일 경우 마운트마다 refetch 실행 옵션을 정할 수 있음
▶ default : true
3. refetchOnReconnect : 데이터가 stale 상태일 경우 재 연결될 때마다 refetch 실행 옵션을 정할 수 있음
▶ default : true
4. retry : 실패한 쿼리를 재시도하는 횟수를 정하는 옵션. 만약 true로 설정 시 무한 재시도를 하고, false일 경우 재시도를 하지 않음
▶ default : 3