React query 란?
React query는 데이터 패칭, 캐싱, 서버 데이터 동기화를 하는 유용한 라이브러리이다.
설치
npm i @tanstack/react-query@5
Dev tools 설치
npm i @tanstack/react-query-devtools@5 -D
장점
gc를 통해 메모리를 관리해준다.
react query를 사용해서 불러온 데이터를 설정한 gc Time(또는 캐시 타임)이 지나도 사용하지 않고 있다면, 가비지 컬렉터에서 수집해서 사용하지 않는 데이터를 정리함으로써 메모리를 확보할 수 있게 된다.
참고로 여기서 가비지 컬렉터의 수집이란. React Query의 기능이 아니라 JS 고유의 기능이고, 사용되지 않는 데이터를 inactive 처리하고 설정해둔 gcTime(기본값 5분)이 지나게 되면 가비지 컬렉터가 동작하게 되는 것이다.
요청한 데이터를 캐싱할 수 있고, 중복된 요청을 제거한다.
데이터를 요청해 fresh한 상태를 가지고 있다면, 그 동안의 같은 데이터 요청에 캐시된 데이터를 응답하게 된다.
이후 데이터가 stale 상태가 되고, 요청이 들어온다면 우선 캐시된 데이터를 보여주고 네트워크 요청을 통해 새로운 데이터를 반환하게 되는 것이다.
요청에 관한 표준 api(성공 , 실패 , 로딩)를 가지고 있다.
const { data, isLoading, isError, error } = useQuery('exampleQueryKey', fetchDataFunction);
예를 들어 다음과 같은 키를 fetchDataFunction 다음과 같은 함수로 데이터 요청을 했을 때, 패칭 상태에 따른 처리가 가능하게 된다.
if(isLoading) return <div>로딩 중 ...</div>
과 같은 처리가 가능하다.
