React-Query

React Query

토이 프로젝트를 진행하며 react query를 적용해보았다. React Query는 Hooks를 통해 fetch 데이터에 접근하거나 caching 해주는 기능을 제공한다. 무슨 뜻인가 하면, state를 만들어서 fetch하고 setState하고 isLoading 상태를 true로 바꾸는 작업을 대신해준다는 것! 실로 편하지 아니한 기능이 아닐 수 없다....

 

일단 세팅은 아래와 같이 Provider로 감싸면 된다.

const queryClient = new QueryClient();
const store = createStore(rootReducer, enhancer);

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <Provider store={store}>
        <Navigation />
      </Provider>
    </QueryClientProvider>
  );
};

 

우선 React Query를 적용할 부분이다. CHANNEL_IDS 배열을 불러와서 state.youtube에 넣는다.

  const [state, setState] = useState<State>({
    youtube: [],
    isLoading : false,
  });

  useEffect(() => {
    const init = async () => {
      const YT = new YoutubeAPI();
      const youtube = CHANNEL_IDS((item) => {
      	const data = await YT.getChannelInfo(item.id);
        return {
          title: data.items[0].snippet.title,
          desc: data.items[0].snippet.description,
          thumb: data.items[0].snippet.thumbnails.default.url,
          url: data.items[0].id,
        }
      })

      setState({ youtube, isLoading:true });
    };
    init();
  }, []);

항상 봐왔던 방식이기 때문에 그렇게 불편함을 느끼지 못했다. 하지만 React Query를 적용한다면?..

(useQuries는 기본적으로 useQuery와 동일하며 쿼리 실행 결과들을 배열로 반환한다는 차이가 있다)

  const youtubes = useQueries(
    CHANNEL_IDS.map((value, index) => {
      return {
        queryKey: ["youtube", index],
        queryFn: () => getChannelInfo(value.id),
      };
    }),
  );

 

 

저 youtubes 객체 안에는 아래와 같은 정보가 담겨있다

const {
   data,
   dataUpdatedAt,
   error,
   errorUpdatedAt,
   failureCount,
   isError,
   isFetched,
   isFetchedAfterMount,
   isFetching,
   isIdle,
   isLoading,
   isLoadingError,
   isPlaceholderData,
   isPreviousData,
   isRefetchError,
   isRefetching,
   isStale,
   isSuccess,
   refetch,
   remove,
   status,
  }

이와 같이 비동기 처리를 react hooks처럼 편리하게 사용할 수 있었다. 공식문서의 Quick Start만 보고 교체할 수 있는 부분만 교체했는데도 만족감이 엄청나다. 앞으로 프로젝트 마무리 하면서도 적극적으로 적용해보고 블로그에 기록해봐야겠다.