토이프로젝트3도 어느덧 마무리 단계에 접어들었다.
마감일이 가까워지면서 점점 무지성 구현 모드(?)로 돌입했고,
어느 순간부터는 "일단 돌아가게 만들자"에만 집중하게 됐던 것 같다.
멘토링 시간 중, 멘토님께서 "staleTime을 왜 그렇게 길게 설정했는지" 질문하셨지만 제대로 답하지 못했다.
(더불어 gcTime에 대해서도 꼭 공부해보라고 권해주셨다.)
시간에 쫓겨 구현하다 보면 이렇게 중요한 개념들을 놓치기 쉬운데, 데브캠프 멘토링 덕분에 다행히 중요한 부분을 되짚고 넘어갈 수 있었다.
암쏘 럭키비키 🍀
아무튼. 이번 글에서는 staleTime에 대해 정리해보고자 한다.
staleTime이란?
fresh→ "이 데이터는 최신이야, 믿을만해!"
stale→ "이거 좀 지난 데이터야… 다시 확인할 필요가 있어."
staleTime은 말 그대로
"이 데이터가 얼마나 오래, 신선(fresh)하다고 생각할지를 정하는 시간"이다.
즉, React Query가
"이 데이터는 아직 신선해"라고 판단하는 시간을 의미한다.
설정 예시
useQuery(['todos'], fetchTodos, {
staleTime: 1000 * 60 // 1분
});- 데이터를 가져온 순간부터
- React Query는 해당 데이터를 1분 동안은 fresh(최신) 하다고 판단한다.
- 1분이 지나면, 자동으로 stale 상태로 전환한다.
- 이후 컴포넌트가 다시 마운트 되거나, 탭이 포커스 되면 자동으로 refetch한다.
언제 유용할까?
- 사용자가 같은 페이지를 짧은 시간 간격으로 여러 번 방문할 때
- 불필요한 네트워크 요청을 줄이고, UX를 부드럽게 만들고 싶을 때
프로젝트 적용 예시 - 유튜브 인기 동영상
이번 프로젝트 주제는 플레이리스트 구독 플랫폼이다.
우리 조는 현재 홈 화면에서 YouTube Data API를 활용해 인기 동영상 목록을 불러와 사용자에게 보여주고 있다.
해당 API에서 제공되는 동영상 목록의 staleTime의 주기는 공식적으로 제공되지 않지만, 실제로 데이터를 확인해본 결과 인기 동영상 목록이 자주 갱신되지는 않는 것으로 보였다.
그래서 우리는 staleTime을 5분으로 설정했고, staleTime을 설정하고 안하고의 차이는 아래 첨부한 화면을 통해 확인이 가능하다.
❌ staleTime 설정 전 (불필요한 API 호출로 할당량 초과함..ㅎ)
⭕️ staleTime 설정 후
이에 대해 조금더 설명해보자면 React Query는 기본적으로 아래와 같은 설정 값을 가진다.
staleTime: 0, // 데이터를 가져오자마자 stale 상태
refetchOnWindowFocus: true, // 탭을 다시 포커스하면 refetch
refetchOnMount: true // 컴포넌트가 다시 마운트되면 refetch그래서 아무 설정도 하지 않으면
데이터를 fetch하고 즉시 stale 상태가 되어버린다.
그렇기 때문에 탭을 다시 클릭하거나, 컴포넌트가 다시 마운트되면
stale (낡은) 상태이므로 자동으로 refetch되면서 불필요한 네트워크 요청과 렌더링이 발생하게 된다.
결론
staleTime은 캐시된 데이터를 얼마나 오래 신뢰할 수 있을지를 정하는 중요한 기준이다.
불필요한 요청을 줄이고, 사용자에게 더 빠르고 부드러운 화면 경험을 제공하기 위해 꼭 고려해야 하는 설정이라고 생각했다.
다음에는 gcTime에 대해서 자세히 공부해보려한다.
