[11주차] 리액트 : 리액트 쿼리, fresh, stale, staleTime, cache context, inactive data, cache time, GC, Client-Side State, Server-Side State, revalidate, invalidateQueries

 

cache context에 데이터가 있다는 건, staleTime이 > 0보다 클때 staleTIme동안 fresh한 데이터가 cache context에 저장되어 있는 것.

 

하지만, staleTime = 0 (참고로 디폴트값)일 때는 fresh한 데이터가 없이 fetching 후에 바로 cache context에 저장되는 것이 아닌  stale 상태가 되고, 그 상태 이후에 현재페이지에서 사용되지 않는다면 inactive 상태가 된다. 근데 만약 유저가 새로고침/window 포커스를 하거나 액션을 했을 때 다시 서버로부터 fetching 요청이 되어서 데이터를 가져온다, 즉 fresh한 데이터가 들어온다.

 

---

 

상황 1:

장바구니에서 순대국추가 -> a : stale time 5min -> 다른 상품보려고 다른페이지로 이동 -> 3분경과 -> 장바구니 다시 확인하려고 다시 왔어 페이지에, stale 2분 남은상태. 장바구니 페이지로 이동한 후에 데이터를 cache context에서 가져와서 보여주는 것이다. 

(만약에 장바구니에 '1등 순대국'이라는 제목을 가진 순대국 상품을 추가해놓았고 다른상품페이지로 이동 후 staletime이 남아있는 상태에 다시 장바구니를 들어가면 ***근데 이때, 1등순대국 판매자가 제목을 '2등순대국'이라고 바꿨다면** 업데이트되지 않은 기존 '1등순대국' 제목이 화면에 랜더링된다)

 

상황2:

장바구니에서 순대국추가 -> b : stale time 0min -> 다른 상품보려고 다른페이지로 이동(그럼이때장바구니 데이터는 inactive가 되고) -> 3분경과 -> 장바구니 다시 확인하려고 다시 왔을 때는 fetching 이 들어가면서 context에 데이터있냐도 물어보고 없다고 하니까 서버에 물어봐서 서버에서 새로 데이터를 받아온다.

 

---

 

왜 cacheTime default가 5분인가?

React Query에서 cacheTime의 기본값이 5분인 것은 캐시된 데이터를 일정 주기로 업데이트하고 새로운 데이터를 가져오기 위한 일반적인 전략에 기인한다. 이 기본값은 다양한 상황에서 적절한 균형을 제공하기 위해 선택되었다.

기본적으로 데이터를 일정 시간 동안 유지하는 것은 캐시된 데이터를 사용하여 성능을 최적화하고 네트워크 요청을 줄이는 데 도움이 된다. 그러나 동시에 너무 오랫동안 캐시를 보유하면 데이터의 실시간성이 떨어질 수 있다.

5분이라는 기본값은 많은 경우에 적합한 값으로 간주된다. 대부분의 애플리케이션에서 5분 주기로 데이터를 새로 고치면서도 사용자에게 빠른 응답성을 제공할 수 있다. 그러나 특정 애플리케이션의 요구 사항에 따라 이 값을 조정할 수 있다.

React Query에서 cacheTime은 milliseconds 단위로 지정되므로, 사용자는 필요에 따라 이 값을 더 낮게 설정하여 더 자주 데이터를 업데이트하거나, 더 높게 설정하여 덜 자주 업데이트하도록 조정할 수 있다.

---

 

리액트쿼리에서 cache context 안에 Fresh data랑 stale data랑 inactive data가 모두 포함되어 있는가?

리액트 쿼리에서 Cache Context에는 기본적으로 fresh data, stale data, inactive data가 모두 포함된다.

1. Fresh Data (최신 데이터): 최근에 서버에서 가져온 데이터로, 현재 화면에 표시되는 데이터입니다.
2. Stale Data (오래된 데이터): 이전에 서버에서 가져온 데이터로, 새로운 데이터를 가져오기 전의 데이터입니다. 데이터를 다시 가져오기 전까지는 stale 상태가 유지됩니다.
3. Inactive Data (비활성 데이터): 현재 화면에는 사용되지 않는 데이터입니다. 리액트 쿼리는 이 데이터를 메모리에 유지하지만, 화면에 표시되지 않는 경우 inactive 상태로 간주합니다.

 

---

 

revalidate(재검증)

Revalidate는 캐시된 데이터가 'stale'(오래된) 상태가 되었을 때, 특정 이벤트가 생겼을 때만 이를 자동으로 감지하고 새로운 데이터를 가져오는 프로세스. React Query는 staleTime이 지난 후,  다른 특정 이벤트(예: 브라우저 창 포커스 재획득)가 발생했을 때 데이터를 재검증한다.

 

invalidateQueries(Query 무효화)

invalidateQueries 메소드는 특정 쿼리 또는 쿼리 그룹을 명시적으로 'stale' 상태로 만든다. 이는 React Query에게 해당 쿼리의 데이터가 더 이상 유효하지 않으며, 가능한 한 빨리 재검증해야 한다는 것을 알린다. 사용자가 데이터를 수정하는 작업을 수행한 후, 관련 쿼리를 'invalidate'함으로써 최신 데이터로의 자동 업데이트를 트리거할 수 있다.

 

 

상황 1: 

투두리스트에 데이터를 추가 -> db에 +1 추가가 됨 -> 근데 addMutation의 revalidate로 코딩이 되어 있다면 -> ui에서 데이터추가 버튼을 누른후에, ui에 아무런 변화 x -> WHY? -> revalidate가 작동되는 트리거의 조건이 불충족되었기 때문에. **충족조건: window포커싱, 새로고침 등**

 

상황 2:

투두리스트에 데이터를 추가 -> db에 +1 추가가 됨 -> cache context에 추가된 데이터에 대한 정보가 아직 없음 -> 그래서 ui에서 화면 변화가 없음 -> 이때는 invalidate을 작동하여 강제적으로 현재 cache context에 있는 데이터를 무효화하고 up-to-date되어 있는 db데이터를 캐싱처리함(싱크를 맞춤) -> 애플리케이션에서는 그런 업데이트 된 데이터를 cache context에서 가져와 화면에 반영해 보여줌 

---

 

staleTime은 주로 get 요청에서 사용된다.

---

클라이언트 사이드 상태 (Client-Side State)

사용자의 브라우저 내에서 관리되는 상태.

일시저장 상태 (새로고침하면 데이터가 날아감)

리액트 컴포넌트의 useState 또는 상태 관리 라이브러리(예: Redux, MobX, Recoil)를 통해 관리

 

서버 사이드 상태 (Server-Side State)

서버 사이드 상태는 서버에 저장되고 관리되는 데이터

새로고침해도 데이터가 저장되어 있음

 

---