React Query가 강력한 이유

Client State vs Server State

Client State
클라이언트 상태는 웹 브라우저에서 유지되는 사용자의 상태 정보를 말합니다. 예를 들어, 사용자가 언어 선택이나 웹사이트 테마(밝은색 혹은 어두운색 배경)를 선택할 때 이 정보는 브라우저 내에서 관리된다.

Server State
서버 상태는 클라이언트에 표시되긴 하지만 실제로는 서버 측에 저장되는 데이터입니다. 예를 들어, 블로그 게시물이나 사용자 계정 정보와 같은 데이터

React query

• 서버 데이터 캐시를 관리한다.
• React 코드에 서버데이터가 필요할 때 fetch나 axios를 사용해 서버로 바로 이동하지 않고 React Query 캐시를 요청한다.
• React Query Client를 어떻게 구성했느냐에 따라 해당 캐시의 데이터를 유지 및 관리한다.
• React Query : 데이터를 관리, 서버의 새 데이터로 캐시를 업데이트하는 시기를 설정하는 것은 사용자의 몫이다.

React Query를 통한 서버 상태 관리

React Query는 서버 상태 관리에 있어 효율적인 데이터 캐싱 및 동기화를 제공
서버로부터 데이터를 요청할 때, 직접 서버에 접근하는 대신 React Query의 캐시를 통해 데이터를 요청하고 관리합니다. 이 과정은 React Query Client 설정에 따라 달라집니다.

• 명령형으로 처리 : Query Client에 이 데이터를 무효화하고 캐시에 교체할 새 데이터를 서버에서 가져오게 지시
• 선언형으로 처리 : 특정 조건(예: 브라우저 포커스 재획득, staleTime 경과)에 따라 refetch를 자동으로 트리거합니다.

주요 기능

이런 데이터 관리 뿐만 아니라 서버 상태 관리에 도움이 되는 다양한 도구가 있다.

• Loading, Error states: 데이터 로딩 및 에러 상태 관리.
• Pagination, Infinite Scroll: 페이지네이션 및 무한 스크롤 구현 지원.
• Prefetching: 사용자의 액션을 예측하여 미리 데이터를 가져와 캐싱.
• Mutations: 서버에서 데이터를 생성, 업데이트, 삭제 등의 변이를 관리.
• De-duplication of Requests: 동일한 쿼리 키를 사용하여 중복 요청을 방지.
• Retry on Error: 오류 발생 시 재시도 관리.
• Callbacks: 쿼리 성공 또는 실패 시 콜백 함수 지정.