[개인 프로젝트] - Holiday Calendar 리팩토링 (React Query)

지난 스터디때 만들었던 휴일캘린더

약 2달 전,,,인가,,,,?
스터디때 만들었던 Holiday Calendar를 싹 갈아 엎어버리기!!!

저 프로젝트에 관해 약간의 TMI를 나열하자면,,,

1. 중간 발표 전날이였나,,, 급하게 주제를  변경함
2. 디자인? 생각하지도 않고 코드부터 침
3. 배포? 나중에 리팩토링할 생각으로 레포지토리 썩혀둠...

메인 프로젝트도 마무리되었겠다, 깃헙 저 아래 숨겨두었던 이 아이를 꺼낼 때가 되어 리팩토링을 시작하려 한다.

 

(주저리 끝!!)

---

메인 프로젝트때 담당했던 부분이 마침 또 캘린더였고 멘토님이 추천해주셨던 useQuery를 사용해 HTTP통신을 해보려한다.

🔥 React Query

애플리케이션에서 데이터를 관리하고 API와의 상호작용을 간편하게 처리하기 위한 라이브러리

React Query를 사용해 데이터를 캐싱하고 관리하며, 비동기 데이터 로딩, 캐싱, 업데이트, 재시도, 자동 캐시 갱신 등을 할 수 있다.

라고는 하는데 살짝 이해하기 어렵다...

구글링을 통해 설명이 잘 되어있는 블로그를 하나 발견했다..!

 

[ React-Query ] 총 정리

react query는 클라이언트 데이터보다 서버 데이터에 대한 관리가 더 많을 때 사용하면 구조를 더욱 단순화 할 수 있다.

이 프로젝트의 경우 클라이언트에서 연도, 월에 대한 데이터를 보내면 해당 월에 대한 공휴일 정보가 응답으로 들어와 달력과 리스트의 형태로 나타내기 때문에 react query를 사용하기 적합하다는 생각이 들었다.

 

이전의 코드는 단순히 axios로 get요청을 보냈기때문에 이 부분을 useQuery를 사용해 코드를 리팩토링했다.

 

1. index.js

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

const queryClient = new QueryClient();

root.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

• QueryClientProvider
  • 비동기 요청을 처리하기 위한 Context Provider로 동작
  • 하위 컴포넌트에서 QueryClient를 사용할 수 있게 해줌

 

2. Component

import { useQuery } from 'react-query';

const { isLoading, isError, data, error } = useQuery(
    ['date'],
    async () => {
      try {
        const response = await axios.get(url);
        return response.data.response.body.items;
      } catch (error) {
        throw new Error(error.message);
      }
    },
    {
      refetchOnWindowFocus: false,
      retry: 0,
      onSuccess: (data) => {
        console.log(data);
      },
      onError: (e) => {
        console.log(e.message);
      },
    }
  );

  if (isLoading) {
    return <span>Loading...</span>;
  }
  if (isError) {
    return <span>Error: {error.message}</span>;
  }