[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
tanstack.com
왜 사용하는데?
- 서버 상태 관리 : 서버의 상태(데이터)를 클라이언트에 캐싱하고 자동으로 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를 공부해 나가며 기술들을 많이 습득해봐야겠다!