[React Query]React Query란

React Query

Server State Management for React
-> 리액트에서 서버 상태를 관리하기 위한 라이브러리

Client State vs Server State

Client State

• 브라우저 세션과 관련된 모든 정보
  ex) 라이트 / 다크 모드 , 언어 등
  -> 서버에서 일어나는 일과는 관련이 없다! 단순히 사용자의 상태를 추적하는 것

Server State

• 서버에 저장되지만 클라이언트에서 필요한 정보
  ex) 블로그 게시물, 인스타그램 사진 등

React Query의 작동 방식

• React Query는 서버 데이터의 캐시를 유지한다.
  클라이언트에서 Axios 또는 Fetch로 데이터를 요청할 때, React Query를 경유하게 된다.
  해당 데이터가 stale하지 않다면, 추가적인 API call이 없어도 되고, 이는 불필요한 요청을 근본적으로 막을 수 있다.
  React Query는 stale한 데이터를 re-fetch하며, 이는 개발자 영역에서도 얼마든지 재설정할 수 있다.

유저는 언제 fresh한 데이터를 봐야할까

1. 화면을 보고 있을 때
2. 페이지가 전환될 때
3. 페이지 전환 없이 데이터를 요청할때

이 세가지 경우를 제외하고는 fresh한 데이터 상태가 아니어도 되기 때문에, React Query의 컨셉을 통해 불필요한 API call을 줄여 서버에 대한 부담을 줄일 수 있다.

추가로 제공되는 기능

1. 로딩 / 에러 상태를 알려주기 때문에 추가로 커스텀할 필요가 없다.
2. 페이지네이션 또는 무한 스크롤을 구현하기 위해 데이터를 조각으로 가져올 수 있는 도구 제공
3. Prefetch를 수행할 수 있다. 미리 데이터를 Fecth하고 cache해 두어서 유저는 기다릴 필요가 없다.
4. 서버 Mutation을 관리할 수 있다.
5. 쿼리는 key로 관리되기 때문에 여러 페이지에서 동일 데이터를 요청할 때 De-duplication할 수 있다.
6. 서버 오류에 대해 재시도를 관리할 수 있다.
7. 성공하거나 오류났을 때 콜백을 전달할 수 있다.