React query 사용법

프로젝트 과제에서 비동기 통신을 하기 위해 react-query 를 직접 사용해 보았던 것을 정리해보았다.

1. react-query 설치

먼저 package.json 에 가서 reacu-query 가 혹시나 설치 되어있는지 확인. 없으면 터미널에서 아래의 명령어 입력해서 react-query 설치

$ yarn add react-query

설치 완료 되면 작업창으로 간다.

2. root 파일로 와서 ReactQueryDevtools, QueryClientProvider / QueryClient 셋팅

• 리액트의 가장 기본이 되는 곳에 react-query 사용할 수 있또록 셋팅한다.

프로젝트 루트에 와서

ReactQueryDevtools 추가

React Query의 모든 내부 작동을 시각화하는 데 도움이 되는 ReactQueryDevtools 를 import 를 한다.

import { ReactQueryDevtools } from 'react-query/devtools';

QueryClientProvider 추가

리액트 쿼리를 사용하려면 QueryClientProvider를 최상단에서 감싸주어야한다.
쿼리 인스턴스를 생성하고 client={queryClient} 를 작성해준다.

• 쿼리 인스턴스 생성

const queryClient = new QueryClient({
  defaultOptions: { queries: { refetchOnMount: false } },
});

적용한 모습

그럼 이제 react-query를 사용할 준비가 되었다.

3. useQuery

내가 과제 프로젝트를 위해 받은 api 는 검색어 창에 질병 키워드를 입력하면 그에 해당하는 데이터가 추천검색어로 뜨는 형태이다.

데이터를 Get 하기 위해서는 useQuery 를 써야한다.
작업하던 파일로 와서 useQuery 를 쓸 수 있도록 import 한다.

import { useQuery } from 'react-query';

useQuery 문법을 먼저 보면,

useQuery 문법
const { data, isLoading, error } = useQuery(queryKey, queryFn, options)

첫번째 파라미터로 unique key가 들어가고,
두번째 파라미터로 비동기 함수(api 호출함수)가 들어간다.
세번째 파라미터는 옵션값이다.