[FE / REACT] React Query

서론..

 

본격적으로 API를 호출하면서 useQuery, useMutaion 등 React Query를 사용하게 되었다

React Query가 무엇인지 정확하게 알고가야 동작 원리를 제대로 파악할 수 있을 것 같아

알아보고자 한다

 

React Query이란

 

데이터 fetching, caching, 동기화, 서버 데이터 업데이트 과정 등을 간소화하여 개발자가 서버 상태 관리에 드는 복잡성과 시간을 줄일 수 있도록 설계된 라이브러리

 

공식 문서에 사용법이 잘 설명되어 있다!

https://tanstack.com/query/latest/docs/framework/react/reference/useQuery

useQuery | TanStack Query Docs

 

왜 사용하는데?

 

• 서버 상태 관리 : 서버의 상태(데이터)를 클라이언트에 캐싱하고 자동으로 UI 동기화 해줌으로 네트워크 요청을 최소화하고 사용자 경험을 향상시켜줌
• 데이터 Fetching : useQuery와 같은 훅을 사용해 데이터를 비동기적으로 가져오고 로딩, 에러 상태 관리 용이
• 캐싱 및 자동 업데이트 : 서버로부터 가져온 데이터를 자동으로 캐싱하고 동일한 요청은 캐시된 데이터로 빠르게 응답
• 데이터 동기화 : 데이터의 신선도를 유지하고 사용자가 최신 상태의 데이터를 볼 수 있게함

즉, 데이터를 가져오고 캐싱할 때 용이하고 자동으로 최신 상태를 유지해 UI를 변화시킬 수 있다!

+ 무한 스크롤 구현시 매우! 편리하다

 

useQuery 사용법

 

데이터를 가져올 때 가장 많이 사용하는 react query 훅이다.

 

useQuery는 주로 두가지 인자를 받는다.

1. QueryKey : 쿼리 키로 쿼리의 고유 식별자. 캐싱 및 쿼리 무효화에 사용

2. QueryFn : 서버로부터 데이터를 비동기적으로 불러오는 함수

 

//API 함수 작성
export const getSaleProduct = async (id: number) => {
  const res = await apiClient.get(`/v1/sales/yanolja/product/detail?id=${id}`);
  return res.data;
};

//쿼리 함수 작성
 export const useQueryGetSaleProduct = (id: number) => {
   const { isLoading, error, data } = useQuery({
     queryKey: ['getSaleProduct', id],
     queryFn: () => getSaleProduct(id),
     select: ({ data }) => data,
   });
   return {
     isLoading,
     error,
     data,
    };
 };
 
 //메인 함수에서 쿼리 함수 불러오기
 const {data, isLoading, error} = useQueryGetSaleProduct(1);

 

다음과 같이 사용 가능하다

먼저 API 함수를 작성해준다. => Axios 인스턴스를 사용해 작성해주었다!

쿼리 함수 작성 => 쿼리키, 쿼리함수, 리턴해줄 값들을 정해준다

(document에서 사용할 수 있는 변수, 메소드들 많이 나와있음)

메인 함수에서 쿼리함수를 호출해 사용해준다! 

 

주요 반환 값

• data : 쿼리 함수에서 반환된 데이터
• error : 쿼리가 실패했을 때 발생하는 에러 객체
• isLoading : 쿼리가 로딩 중인지 나타내는 boolean값

추가적으로 staleTime을 설정해 데이터 새로고침 주기나 retry로 재시도 횟수를 지정할 수 있다!

 

useMutation 사용법

 

사실 useQuery는 많이 들어봤는데 useMutation은 처음 들어 보았다

 

useMutation은 데이터를 생성, 업데이트, 삭제하는 변화를 서버에 요청하고 작업을 수행할 때 사용된다고 한다!

사용법은 useQuery와 흡사하다!

 

export const postSaleProduct = async (product: ProductItem) => {
  const res = await apiClient.post(`/v1/sales/product`, product);
  return res.data;
};

export const useMutaionPostSaleProduct = () => {
  const mutation = useMutation({
    mutationKey: ['postSaleProduct'],
    mutationFn: (productItem: ProductItem) => postSaleProduct(productItem),
  });
  return mutation;
};

const mutation = useMutationPostSaleProduct();

mutation.mutate();

 

먼저 API 함수 작성해주고

쿼리 함수를 작성해준다

mutationKey, mutationFn를 필수로 지정해주면 된다!

useMutation의 다른점은 mutate 함수로 쿼리 함수를 실행해준다는 것이다!

나머지는 useQuery와 사용법이 비슷하다!

 

주요 반환 값과 함수

• mutate: 변형 함수를 실행하는 데 사용
• isLoading: 요청이 로딩 중인지를 나타내는 boolean 값
• error: 요청이 실패했을 때 발생하는 에러 객체입니다.
• data: 변형 작업의 결과 데이터

 

외에도 onSuccess, onError, onMutate 를 통해 작업이 성공한 후, 실패한 후, 호출되기 전 각각 함수를 지정해 원하는 작업을 수행할 수 있다!

 

사용해보니...

 

useQuery를 단순히 캐싱을 위해 사용한다고 생각했었다

하지만 성공, 에러처리가 정말 너무 간단하고 데이터를 파싱하는 것도 간단하게 처리할 수 있어서 가장 좋았다

또한 useMutation을 사용해 데이터 등록, 수정, 삭제와 같은 처리도 용이하게 해줄 수 있어서 좋았다

앞으로 react query를 공부해 나가며 기술들을 많이 습득해봐야겠다!