[React-Query] 캐싱, 헷갈리는 부분

React-Query는 캐싱을 지원한다. 특정 query key를 가진 인스턴스가 마운트 되었을 때, 호출된 적이 없었다면 데이터를 캐싱해두고 다음 요청에  캐싱된 데이터를 제공한다. 패치된 후 데이터의 라이프 사이클을 이해하면 더 좋은 활용이 가능할 것 같아서 글로 정리해보려 한다. 아래 이미지는 개인 프로젝트 React-Query로 캐싱된 데이터를 캡쳐한 이미지다.

위를 보면 fresh, fetching, stale, inactive 가 있는데 데이터의 상태이자 이것들로 라이프 사이클을 설명할 수 있다. 각 상태에 대해 설명남기면, 

 

Fetching : 초기 상태이며 백엔드와 같은 외부 소스로부터 데이터를 가져오기 위한 동작.

Fresh : Fetchung 이후에 server-side와 client-side 데이터가 동일하게 유지되는 상태

Stale : 데이터가 오래된 상태.( Fetching 통해 Fresh 상태로 변경)

Inactive : 사용되지 않는 데이터에 대한 상태. (가비지 컬렉터의 수거 대상)

 

이러하다.

 

데이터가 Fresh 상태일 땐 논란(?), 헷갈림의 여지가 없다. 같은 query key에 호출된 적이 있는 데이터라면 캐싱된 데이터를 제공할 것이다. Stale 상태일 땐 어떨까? Inactive라는 상태가 있어서 어느 시점에서 다시 데이터 페칭이 일어나지, 언제 확실히 캐시에서 제거가되는지 헷갈릴 수 있는 부분이라 생각한다.

 

데이터 페칭이 다시 일어나는 상태는 Stale 상태부터 이다. 근데 이때의 페칭은 처음 데이터를 요청할 때와는 다른 페칭이다. 이때 일어나는 페칭을 Background re-fetching 이라고 한다. 과정은 다음과 같다.

 

1. 먼저 캐싱된 데이터를 가져와 브라우저에 보여준다.

2. 데이터가 구식일 수 있기 때문에 암묵적으로 다시 서버에 재요청을해서 데이터를 Fresh하게 바꾼다.

3. 데이터의 변화가 있었다면 캐시를 업데이트하고 UI도 변경된다. (아니라면 그대로 유지된다.)

 

Stale 상태에는 캐시된 데이터도 불러오고, 데이터 페칭도 일어난다고 보면 된다. 데이터가 Stale 상태라고 판단할 시간을  QueryClient를 생성하면서 또는 인스턴스를 마운트 하면서 설정할 수 있는데 staletime의 값을 변경하면 된다. 기본값은 0이다. 그러니까 지금까지 변경을 안하고 사용했다면, 데이터를 요청해서 불러오자마자 stale 상태가 되었을 것이다.

 

inactive 상태에는 평범한 데이터 페칭이 일어난다. Background re-fetching과 차이는 isLoading 값의 차이이다. 전자는 true 후자는 false이다. Background re-fetching 때는 따로 로딩이 일어나지 않는다는 것이다.

 

자주 변경될 가능성이 높은 데이터라면 stale time을 낮게 그렇지 않다면 높게 설정하면 데이터 페칭을 줄일 수 있다.