React

react-query 찍먹 let's go

gaoooon 2024. 1. 31. 19:07

react-query는 뭘까?

react-query는 server state 자동으로 caching과 refetching을 해주는 비동기 상태 관리 라이브러리이다

 

여기서 말하는 server state는 서버로 부터 가져온 데이터의 상태를 말한다

 

react-query가 refetching 할 때

  • 새 컴포넌트가 마운트 될 때
  • 브라우저가 포커스 되었을 때
  • 네트워크가 다시 연결 되었을 때


사용해보기

  • QueryClient
  • QueryClientProvider
  • useQuery
  • useMutaion

QueryClient

QueryClient는 모든 query와 mutation에 대한 상태와 캐시를 가지고 있는 클래스이다

const queryClient = new QueryClient();

 

QueryClientProvider

 

QueryClientProvider는 다른 모든 컴포넌트들에서 QueryClient 인스턴스에 접근 할 수 있도록 도와준다

 

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")!).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

 

QueryClientProvider는 props로 client 속성을 받는데 client의 값으로는 QueryClient의 인스턴스를 받는다

QueryClientProvider로 감싸면 하위 태그에서 QueryClient에 접근 할 수 있게 된다

 

useQuery

useQuery는 데이터를 패칭 할 때 사용되며 http 메서드로 나타내자면 get과 같다

 

 const getData = async () =>
  await axios.get("https://jsonplaceholder.typicode.com/posts");

 const { data } = useQuery({ queryKey: ["get"], queryFn: getData, ...option });

 

useQuery로 데이터를 패칭하는 기본 구조이다 useQuery는 객체를 인자로 받고

인자로 받은 객체에는 필수로 queryKey 속성과, queryfn 속성이 있어야 한다

  • queryKey - react-query에서는 이 queryKey를 기반을 캐싱을 하기 때문에 각 query당 고유한 키를 가져야 한다
  • queryFn - queryFn은 비동기 작업을 수행하고 promise를 반환하는 하는 함수, 즉 데이터를 요청하는 함수이다

또한 다양한 옵션을 설정 할 수 있는데 몇가지만 알아보겠다!

  • staleTime - staleTime은 데이터를 얼마나 fresh하다고 여길지를 정하는 옵션이다
  • gcTime - gcTime은 캐싱된 데이터를 얼마나 메모리에 저장해 둘지를 정하는 옵션이다 

 

useMutation

useMutation은 데이터를 업데이트 할 때 사용되며 http 메서드로 나타내자면 post, put, delete와 같다

 

const postData = async () => await axios.post(URL, {...body});

const { mutate } = useMutation({
    mutationFn: postData,
    onSuccess: () => console.log("성공"),
    onError: () => console.log("실패"),
    onSettled: () => console.log("완료"),
 });

 

useMutation으로 데이터를 업데이트 하는 기본 구조이다 useMutation은 useQuery와 같이 객체를 인자로 받고

인자로 받은 객체에는 필수로 mutationFn 속성이 있어야 한다

  • mutationFn - mutationFn은 비동기 작업을 수행하고 promist를 반환하는 함수, 즉 데이터 업데이트를 요청하는 함수이고 반환 받은 mutate로 실행 시킬수 있다

또한 useQuery 처럼 다양한 옵션이 있다

  • onSuccess - 보낸 요청이 제대로 작동해 성공했을때 어떻게 할 지를 정하는 옵션이다
  • onError - 보낸 요청에 에러가 발생했을때 어떻게 할 지를 정하는 옵션이다
  • onSettled - 자바스크립트의 promise의 finally처럼 성공이나 에러에 상관 없이 요청이 끝났을때 어떻게 할 지를 정하는 옵션이다
  • mutationKey - queryKey 처럼 필수는 아니지만 지정해 주면 식별하는데에 유용하다

 

마무리

 

이렇게 react-query에 대해 알아보고 간단한 사용방법을 알아 보았다

기존에는 가져오는 데이터가 변경되면 데이터를 다시 불러오는걸 어떻게 해야할지 모르겠었는데

react-query를 사용한다면 손쉽게 해결 할 수 있을거 같다는 생각이 든다

그리고 이제는 react에서만 지원하는게 아니라 vue, angler 등등에서 지원도 하여 tanstack-query로 이름을 변경하였다고 한다!

728x90