[WIL] 9주차 실전프로젝트 회고

9주차간 내가 막혔던 부분은 useInfinitequery이다. 

무한스크롤을 구현하기위해 Tanstack-query의 기능을 사용했다.

공식문서에서 제공하는 정보로는 페이징 처리된 데이터에 page라는 항목이 명시되어서 쉽게 다음페이지를 알수있도록 하였다.

 

하지만 우리조의 데이터는 그냥 딱 데이터들을 나눠놨을뿐, 나에게 페이지에 관한 정보가 없는 상태였다.

 

그래서 공식문서 및 여러 깃허브 예제를 보고 유추해낸것이 있다.

 

const {
    data,
    fetchNextPage,
    hasNextPage,
    isLoading,
    isFetching,
    isError,
    error,
  } = useInfiniteQuery(
    ["getThemeList", genre, location, score, difficulty, people],
    ({ pageParam = 0 }) =>
      getFilterTheme({ pageParam, genre, location, score, people, difficulty }),
    {
      getNextPageParam: (lastPage, allPages) => {
        //현재 페이지의 데이터가 5개이면 다음페이지를 가져오고
        //5보다 작으면 undefined로 다음페이지가 없다고 명령함
        //getNextPageParam의 첫번째 인자는 현재페이지 정보, 두번째 인자는 불러온 모든 페이지 정보
        if (lastPage.data.length === 5) {
          return allPages.length;
        } else if (lastPage.data.length < 5) {
          return undefined;
        }
      },
    }
  );

일단 위 코드는 내가 이번에 사용한 useInfiniteQuery이다.

 

여기서 세번째 인자로 getNextParam을 받았는데 getNextParam의 첫번째 인자는 마지막으로 fetch된 페이지에 대한 정보가 있었고, 두번째 인자로는 지금까지 받아온 페이지가 배열형태로 있었다.

 

우리는 데이터를 5개씩 나눠서 페이징처리를 했기 때문에 나는 이 정보들을 이용해서 알고리즘 문제 풀듯이 구현해야 했다.

 

만약 현재페이지의 데이터가 5개이면 다음 페이지를 불러와야 했다. 하지만 다음페이지가 몇페이지인지 불러오는 정보는 현재까지 받아온 페이지의 길이를 다음페이지 번호로 주면 됐다. 왜냐하면 첫 페이지는 0번에서 시작하고, 현재까지 받아온 페이지 배열의 길이는 1이기 때문이였다.

 

따라서 5일때 다음페이지를 불러오면서 5보다 작다면 다음페이지는 undefined처리를 하여 다음 페이지가 없다 라는 정보를 주었다.

 

사실 공식문서를 아무리 상세하게 봐도 위 같은 내용을 알기 힘들었다. 그래서 여러 블로그와 깃허브 예제를 보면서 도대체 어떤 공통점이 있는지를 유추하고, 각 항목이 무슨 역할을 하는지에 하나씩 직접 써보고 지워보고 하니 쉽게 알 수 있었다.

 

나는 처음부터 어렵다고 생각하면 조금 겁을 먹는 경향이 있었다. 하지만 항해를 시작하고 나서는 자기최면을 한다. 나는 무조건 이 문제를 쉽게 해결할수있다 라는 생각을 하는 것이다. 이는 근본없는 자신감을 형성하긴 하지만 언제나 처럼 시간이 지나면 다 해결되어 있는 나를 발견하는데 큰 역할을 하는 것 같다. 이런 생각을 하지 않았더라면, 난 쉽게 포기하고 바로 다른사람의 힘만 빌려서 찾게 되는 의지가 약한 사람이 되었을 것 같다.