15.2.4 staleTime과 cacheTime

useQuery의 options 필드 중 staleTime과 cacheTime이 있는데, 이 개념이 처음에는 조금 익숙하지 않을 수 있으므로 한번 알아보고 넘어갑시다.

우선 stale은 ‘신선하지 않다’라는 사전적 의미를 가지고 있습니다. 이 의미는 데이터가 더 이상 유효하지 않다는 뜻이죠. useQuery를 사용할 때 staleTime 옵션은 기본값이 0입니다. 즉, 데이터를 조회한 순간 데이터는 바로 유효하지 않게 됩니다. 데이터가 유효하지 않다면 기회가 주어졌을 때 다시 요청하여 데이터를 최신화해야 합니다. 재요청 기회가 주어지는 시점은 (똑같은 캐시 키를 사용하는) useQuery를 사용하는 컴포넌트가 마운트될 때입니다.

cacheTime은 useQuery Hook을 사용한 컴포넌트가 언마운트되고 나서 해당 데이터를 얼마 동안 유지할지에 대한 설정입니다. 기본값은 5분입니다. 만약 useQuery를 사용한 컴포넌트가 언마운트되고 나서 5분 안에 다시 마운트된다면 isLoading 값이 true로 되지 않고, 처음 렌더링하는 시점부터 data 값이 이전에 불러온 데이터로 채워져 있게 됩니다. 그리고 staleTime에 따라 해당 데이터가 유효하다면 재요청하지 않고, 유효하지 않다면 재요청합니다.

다음 상황을 통해 useQuery의 작동 방식을 이해해보세요.

Case 1. (기본 옵션) 기본 옵션에서 staleTime은 0, cacheTime은 5분입니다.