Client State : 웹 브라우저 세션과 관련된 모든 정보를 의미한다.

• ex) 사용자가 언어 선택을 하거나,
• ex) 사용자가 다크모드나 라이트모드로 변경하는 것

<aside> 💡 이러한 상태는 서버에서 일어나는 일과는 아무 관련이 없다……

</aside>

Server State : 서버 상태는 서버에 저장되지만, 클라이언트에 표시하는 데 필요한 데이터이다.

• ex) 데이터 베이스에 저장하는 블로그 게시물 데이터!
• 여러 클라이언트들에게 데이터를 표시해야하기 때문에 서버에 저장된다…..

React query가 무슨 문제를 해결해 주나요??

• 리액트 쿼리는 클라이언트에서 서버 데이터 캐시를 관리한다.
• React 코드에 서버 데이터가 필요할 때, Fetch나 Axios를 사용해 서버로 바로 이동하지 않고, React query 캐시를 요청한다. → 서버 데이터의 진짜 원천이다.

<aside> 💡 React query역할은 QueryClient를 어떻게 구성했느냐에 따라 해당 캐시의 데이터를 유지 관리 하는 것.

</aside>

• 데이터를 관리하는 것은 React Query라이브러리이다. 서버의 새 데이터로 캐시를 업데이트 하는 시기를 설정하는 것은 사용자의 몫이다.

React query Cache 예시

• 이 캐시에는 ‘blog-posts’라는 키를 할당한 데이터가 있다…

  • 키로 데이터를 식별할 수 있게 된다.

• 클라이언트 캐시(React-query가 클라이언트에 깔려 있으므로) 에 있는 이 데이터가, 서버 데이터와 일치하는지 확인해야 하는데, 두 가지 방법이 있다.

  1. 명령형으로 처리하는 방법 : 쿼리 클라이언트에 이 데이터를 무효화하고, 캐시에 교체할 새 데이터를 서버에서 가져오게 지시하는 것.
  2. 선언형으로 처리하는 방법 : 리페치를 트리거하는 조건을 미리 구성해 놓는다. ex) 브라우저 창이 다시 포커스 되었을 떄, staleTime으로 다시 가져오기를 언제 트리거할지도 미리 선언해 놓는다. 30초 이후에 브라우저 창에 포커스가 되었을때 서버에서 새 데이터를 가져오도록 구성할 수 있다.

• React query는 서버 상태 관리에 도움이 되는 많은 도구가 함께 제공된다.

  • 서버에 대한 모든 쿼리의 로딩 및 오류 상태를 유지해주기 때문에, 수동으로 따로 로딩상태, 오류상태를 구현하지 않아도된다.
  • 페이지네이션, (필요한 경우 데이터를 조각으로 가져올 수 있는 도구도 제공한다.)
  • prefetching : 사용자가 언제 이 데이터를 필요로 할지 예상하여 prefetch를 해 올 수 있다.
    • 데이터를 미리 가져와서 캐시에 넣는다.
    • 사용자가 데이터가 필요할때, 앱이 캐시에서 해당 데이터를 가져온다.( 필요할때 서버에 데이터를 호출하는게 아니라는점…) → 데이터 가져올때 로딩할 필요가 없으므로 유저 경험이 증가한다.
  • 뮤테이션 : React-query가 서버에서 데이터의 변이나 업데이트를 관리할 수 있다.
  • 각각의 쿼리들은 “키”로 식별되기 때문에, React-query는 요청을 관리할 수 있고, 페이지를 로드하고 해당 페이지의 여러 구성 요소가 동일한 데이터를 요청하는 경우, React-query는 쿼리를 한 번에 보낼 수 있다. ??? 이건 이해가 안갔음
  • 서버에서 오류가 발생하는 경우에 대한, 재시도 요청도 자동으로 보낼 수 있다.
  • 쿼리가 성공하거나 오류가 났을 때를 구별해서, 조치를 취할 수 있도록 CallbackFunction을 전달 할 수 있다.