News Viewer

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 React PairProgramming과제를 진행하며 회고를 정리하는 글이다.

 

- 현상

JavaScript로 구현할 때 Nav의 상태인 category가 바뀌면 NewsList컴포넌트는 리 렌더링 되어야 했기 때문에 Proxy와 ObserverPattern을 사용하였다.

category를 Proxy로 감싸 전역 상태로 두고 전역 상태가 변경되면 이를 구독하는 컴포넌트를 리 렌더링 하는 방식이었다.

   

이를 React에서 구현하기 위해 고민했다.

   

- 발견

Nav의 상태인 category를 Recoil을 사용하여 전역 상태로 관리하고 상태가 변경되면 infiniteQuery라이브러리를 사용하여 dateFetch 및 page관리하는 방법으로 NewList를  리 렌더링을 하였다.

// useInfiniteQuery Example

const {
  fetchNextPage,
  fetchPreviousPage,
  hasNextPage,
  hasPreviousPage,
  isFetchingNextPage,
  isFetchingPreviousPage,
  ...result
} = useInfiniteQuery({
  queryKey,
  queryFn: ({ pageParam = 1 }) => fetchPage(pageParam),
  ...options,
  getNextPageParam: (lastPage, allPages) => lastPage.nextCursor,
  getPreviousPageParam: (firstPage, allPages) => firstPage.prevCursor,
})

   

Recoil과 useInfiniteQuery 사용

data, hasNextPage, fetchNextPage를 사용하여 CustomHook을 만들고 마우스를 스크롤 했을 때 새로운 뉴스를 추가하여 그리는 부분에 사용하였다.

// useInfiniteQuery를 사용하여 만든 CustomHook

import { useRecoilValue } from 'recoil';
import { useInfiniteQuery } from '@tanstack/react-query';
import categoryState from '../recoil/atoms/categoryState';

const useArticles = () => {
  const category = useRecoilValue(categoryState);

  const { data, hasNextPage, fetchNextPage } = useInfiniteQuery({
    queryKey: ['Articles', category],
    queryFn: ({ pageParam = 1 }) => fetchArticles(category, pageParam),
    getNextPageParam: (lastPage, allPages) => {
      const nextPage = allPages.length + 1;
      return lastPage.articles.length !== 0 ? nextPage : undefined;
    },
    staleTime: 3000,
  });

  return { dataList: data.pages, hasNextPage, fetchNextPage };
};

getNextPageparam에서 받아올 page가 있다면 nextPage를 반환하여  다음 fetchFunction의  pageParam으로 전달되고 더 이상 불러올 기사가 없다면 undefined를 반환하여 hasNextpage가 false가 된다.

이로 인하여 ScrollObserver컴포넌트가 조건부 렌더링이 된다.

// ScrollObserver Component
<Container ref={observerRef}>{hasNextPage && <img src="img/ball-triangle.svg" alt="Loading..." />}</Container>;

- 배운점

useInfiniteQuery의 사용법을 배웠다.

전에 사용해봤던 useQuery와 useInfiniteQuery 사용법이 거의 비슷했기 때문에 시간이 덜 소요되었던 것 같다.

 

- 선언

React를 사용할 때 새로운 라이브러리를 빠르게 습득하고 적용하는 연습을 많이 해야겠다.

한 번 배운 라이브러리를 제대로 익혔다면 비슷한 종류의 새로운 라이브러리의 습득도 금방 할 수 있을 것 같다.