React-Query 사용하기

React-Query의 장점과 왜 사용하는지에 대한 이유들은 앞 블로그에서 설명해드렸으니 실제 사용으로 넘어가보겠습니다.

1. 설치

npm install @tanstack/react-query

npm install @tanstack/react-query-devtools

여기서 devtools는 선택사항이며,

devtools란?

fresh

fetching

stale

inactive

와 같이 비동기 데이터를 쉽게 다룰 수 있게 해주는 react-query안에서 제공하는 하나의 개발자 도구라고 생각하면 된다.

2. 시작하기

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

const queryClient = new QueryClient();

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

QueryClientProvider와 queryClient는 뭐냐면

QueryClientProvider를 사용하여 애플리케이션에 전체적인 데이터 관리를 제공하는 클라이언트를 설정해야 합니다.

여기서 client={queryClient}는 QueryClientProvider에게 queryClient 객체를 제공하여 React 애플리케이션 전반에 걸쳐 사용할 수 있도록 합니다.

이를 통해서 애플리케이션의 여러 컴포넌트에서 데이터를 쿼리하고 관리할 수 있게 됩니다.

3. useQuery

const getData = async () => {
    const response = await axios.get('https://somthing/api');
    return response.data;
  }

const { data } = useQuery({ queryKey: ['getDatas'], queryFn: getData, {
    onSuccess: (data) => {
      console.log(data)
    },
    onError: (data) => {
      console.log(data)
    },
  }})

이 코드는 useQuery를 사용할때의 기본 구조이며,

useQuery의 객체에는 필수로 queryKey, queryFunction(Promise 반환) 속성이 있어야 한다.

추가로 선택하여 option을 넣을 수 있으며 기본적으로 제공하는 onSuccess, onError, staleTime이 대표적이다.

4. useMutation

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

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

useMutation은 데이터를 변경하고 업데이트하는 데 사용됩니다.

그리고 주로 POST, PUT, DELETE 등의 요청과 함께 사용됩니다.

이렇게만 보면 useQuery와 useMutation은 외형이 비슷하고 사용되는 http method만 다르다고 생각할 수 있다.

하지만

useQuery는

데이터를 서버에서 가져와서 캐시하며, 필요할 때마다 해당 데이터를 다시 가져오는 데 사용되는 장점이 있어서

주로 get과 같은 읽기 전용 method에 주로 쓰이며

useMutation은

데이터를 서버에 변경 요청을 보내고, 해당 요청의 성공 또는 실패를 처리하는 데 사용되기 때문에

주로 post와 같은 쓰기 전용 method에 주로 쓰이는 큰 차이점이 있습니다.

각자에 차이점을 파악하고 쓰면 굉장히 좋은 개발자가 될 것 같다.

5. 느낀점

이번 React-Query를 조사하면서 모르는게 생기고 그 모르는 것들을 파고 계속 들어갈때마다 시간 소요가 많이 됬던 것

같지만 그 소요된 시간만큼 내 머릿속에 React-Query라는 것이 어떤식으로 돌아가는지 알 수 있다는게 기분이 좋았다.

재균의 FE일지