[✨Refactor] React Query 로 효율적으로 캐싱처리하기

📌 캐싱이란?

• 서버에서 어떤 데이터를 불러온 후에 그 데이터를 불러온 저장소보다 가까운 곳에 임시로 저장하여, 필요시 빠르게 불러와 사용하는 프로세스를 의미한다.
• 메모리 계층 구조에서 캐시는 디스크나 메인 메모리보다 더 빠르게 데이터를 불러와서 사용해야 할 때 쓰인다.

• 캐싱된 데이터를 사용하면 동일한 요청이 반복적으로 서버에 요청되지 않는다. 이는 네트워크 트래픽을 줄이고, 서버와 클라이언트 간의 왕복 시간(RTT, Round Trip Time)을 단축시킨다. 더 빠른 속도로 데이터를 제공할 수 있다는 의미이다. 이는 즉 사용자 경험을 개선할 수 있기 때문에 캐싱을 잘 활용하는 것이 중요하다.
• 현재 작업중인 Next 프로젝트의 성능을 더 개선시킬 수 있는 방법이 없을까 고민하다가 캐싱에 대해서 공부도 하고 개선도 해보기 위해 캐싱을 다뤄보게 되었다.

 

 

 

📌 Tanstack Query 의 캐싱

• Tanstack query는 전역 상태 관리, 코드 간소화 등 많은 장점을 가지고 있지만 가장 매력적인 기능은 캐싱 기능이다.
• Tanstack query의 캐싱 기능을 제대로 활용하기 위해선 staleTime, gcTime을 설정하여 캐싱 처리를 할 수 있다.

 

 

 

📌 Tanstack Query의 데이터 상태 구분

• Tanstack Query는 데이터를 Stale(상한 상태) 와 Fresh(신선한 상태)로 구분하여 캐시된 데이터가 신선하다면 캐시 데이터를 사용하고 상했다면 서버에 다시 요청해 새로운 신선한 데이터를 가져온다.
• 즉, 캐시 데이터가 상하기 전까지 캐시데이터를 읽어오기 때문에 불필요한 네트워크 요청이 발생하지 않는다.

 

 

 

📌 staleTime

• 데이터가 상하는 데 까지 걸리는 시간을 지정할 수 있는 옵션
• 디폴트 값 : 0ms
• staleTime 이후에 해당 쿼리키의 캐시 데이터는 stale 상태로 변경된다.

 

 

 

📌 gcTime (=cacheTime)

• 캐시에 비활성 상태의 데이터가 유지되는 시간을 지정할 수 있는 옵션
• 디폴트 값 : 5분
• gcTime 이후에는 Garbage Collection에 의해 캐시가 삭제된다.
• 데이너틑 모든 해당 컴포넌트가 언마운트되어 관찰자가 없는 상태가 되는 즉시 비활성 상태로 전환된다.

 

 

 

📌 staleTime 과 gcTime의 관계

• staleTime 보다 gcTime 이 더 커야 서버에서 fresh한 데이터를 가져오는 동안 캐시 데이터를 보여줄 수 있다.

 

 

 

📌 캐싱 비교해보기

staleTime 적용 전

const queryClient = new QueryClient();

• 화질이 안좋긴 하지만... 보면 네트워크 호출이 반복적으로 발생하고 있다.

 

staleTime 적용 후

• 20초 정도로 staleTime을 설정한 뒤 확인해보았다.

const queryClient = new QueryClient({
        defaultOptions: {
          queries: {
            staleTime: 20 * 1000,
          },
        },
      }),

• 캐시데이터에 대해선 네트워크 요청이 발생하지 않는 것을 볼 수 있다.

 

 

 

📌 모든 혹은 특정 키 쿼리 데이터 업데이트하기

// 캐시 내 모든 쿼리 무효화
queryClient.invalidateQueries();
// FEEDS_KEY 키 값의 쿼리 데이터 무효화
queryClient.invalidateQueries({ queryKey: [FEEDS_KEY] });

• invalidateQueries 메서드를 통해 캐시 데이터를 업데이트 할 수 있다. 
• 글을 추가하거나, 수정하거나 하는 등의 mutation 이후 쿼리 무효화를 통해 데이터를 최신 데이터 상태로 동기화할 수 있다.
• 이때, queryClient는 동일해야 한다.

 

 

 

📌 느낀 점

• 캐싱은 성능을 개선시킬 수 있는 중요한 개념이기 때문에 이에 대해 아는 것이 중요하다고 생각했다. 직접 구현하는 것은 더 많은 공부를 요구하겠지만 Tanstack Query를 잘 활용해 캐싱처리를 할 수 있다니 참 다행이라는 생각도 들었다.
• 불필요한 네트워크 요청을 줄여 서버 부하를 줄인다면 복잡한 서비스의 경우에는 더 큰 성능 개선을 체감할 수 있을 것이라고 생각된다. 이러한 노력이 사용자 경험을 크게 개선하도록 도와줄 것이라고도 생각한다.