React Query | 시작

클라이언트 상태와 서버 상태

클라이언트 상태

웹 브라우저 세션과 관련된 모든 정보를 의미한다
서버와 관련 없는 클라이언트의 상태

서버 상태

서버에 저장되는 클라이언트 데이터

리액트 쿼리는 서버 데이터 캐시를 관리한다
주요 목적은 캐시 데이터를 어떻게 관리할지 간편하게 설정하는 것

서버 상태 관리

리액트 쿼리는 문자열 배열로 이루어진 key 를 통해 데이터를 식별한다
현재 캐싱된 데이터가 서버 데이터와 일치하는지 확인하는 방법은
명령형, 선언형 두 가지 방식이 있다
명령형으로 바로 데이터를 새로 가져오게 하거나
선언형으로 리페치 트리거 조건을 설정하거나 stale time 을 설정 방법

그 외 기능

이외에도 서버 상태를 관리하는 많은 방법을 제공한다
loading, error states, pagination, infinite scroll 등
페이지네이션과 무한 스크롤 등에서 prefecting 을 사용할 수도 있다
mutaions 로 데이터의 변이나 업데이트를 관리할 수 있다
데이터를 key 로 관리하기 때문에 같은 데이터에 대해 여러번 요청 시 중복 요청을 방지할 수 있다
error 발생 시 재시도에 대한 관리 기능도 있다

사용

npm install @tanstack/react-query

• query client 생성
• query provider 적용 (query client 를 값으로 사용)
• call useQuery