최근에 했던 프로젝트에 리액트 쿼리를 활용하려고 했으나 흐지부지 쓰지 못했던게 아쉬워서 다음 프로젝트에서는 제대로 사용하려고 공부하기 위한 리액트 쿼리 정리이다.

1. react-query설치하기

먼저 react-query를 사용하기 위해서는 사용하려는 프로젝트에서 "@tanstack/react-query"를 설치해줘야 한다.

npm i @tanstack/react-query

2. useQuery 사용하기

리액트 쿼리 공급자와 클라이언트에서 캐시 데이터를 사용하겠다는 생성자가 하나 필요하다.
위와같이 앱의 최상단에서 "@tanstack/react-query"패키지를 통해 QueryClient와 QueryClientProvider를 import 해준다.

그리고 QueryClient를 통해서 새로운 인스턴스를 하나 생성해준다.

먼저 QueryClient공급자 컴포넌트를 사용하고자 하는 리액트 하는 부분에 감싸주고 해당 공급자 컴포넌트의 client속성으로 함수 컴포넌트 외부에서 만든 인스턴스를 전달해 준다.

위와 같이 하면 공급자가 클라이언트를 소품으로
사용하게 되면서 클라이언트가 가지고 있는 캐시와 모든 기본 옵션을 공급자의 자식 컴포넌트에도 사용할 수 있게 된다.

이제 QueryClientProvider공급자 컴포넌트 내부에 있는 컴포넌트에서 useQuery훅 사용이 가능해진다.

useQuery훅은 서버에서 데이터를 가져올 때 사용하는 훅이다.

useQuery는 다양한 객채 속성을 가진다.

• queryKey : 요청 키
  - version 3에서는 하나의 키 밖에 없을 경우 단순 문자열로 들어갔는데 version 4에서부터 무조건 배열안에 원소 형태로 들어가야 한다.

• queryFn : 요청 함수
  - 해당 요청에 대한 데이터를 가져오는 방법을 말한다.
  • 데이터를 가져오는 비동기 함수여야 한다.

이제 우리가 매핑하는 데이터는 "fetchPosts"에서 반환된 데이터가 된다.
다만, version 4 에서는 단순한 인수가 아닌 객체 형태로 인자를 넣어줘야 한다.

하지만 위와같은 에러가 발생할 것이다.

그 이유는 "fetchPosts"가 해결되기 전까지 "data"는 useQuery훅에서 정의되지 않는다.

useQuery는 "fetchPosts"가 데이터를 반환하지 않는 경우 데이터를 할당할 항목을 알 수 없기 때문이다.

이에대한 해결법으로 isLoading, isFetching객체 속성을 useQuery훅이 반환해주는데 이에 대한 내용은 다음챕터에서 진행하도록 하겠다.