👨‍💻 사건

무한스크롤을 구현하기위해, React-Query 의 useInfiniteQuery 를 사용했다.
처음 사용했을때는 굉장히 아무 문제 없이 잘 사용하였다.

컴포넌트 분리를 하면서 , Redux 로 테이블 컴포넌트의 옵션과 Select 박스 컴포넌트의 옵션을 업데이트 하고 메인에서 데이터 패칭을 하였다. 여기서 부터 4시간동안 오류를 찾지 못하고 헤딩을 하였다...

<main>
  <OptionSelect />
  <Table data={data} hasNextPage={hasNextPage} fetchNextPage={fetchNextPage} isDisabled={true} />
</main>

그리고 Table 안에 Observer 가 있고, Observer 컴포넌트는 hasNextPage 가 존재하면 동작한다.
그리고 Observer에 fetchNextPage 를 전달하여, isIntersecting 이 1 이 되면 (교차영역에 들어가면) 다음 페이지를 패칭하도록 설정하였다.

이게 참,,,OptionSelect 를 통해, 옵션을 2개이상 주거나, 하나도 안주면 정상적으로 동작하였다. 문제는 단 한개의 옵션을 선택했을때는 동작하지않는다..

처음에는 상태관리를 업데이트하면서 useInfiniteQuery 의 pageParams 가 정상적으로 받아오지 못하고있나? 아니면 의존성 배열이 잘못되었나 했다.

export function useFetchPlayers(selectedHeader: HeaderType, order: OrderType, filters?: any) {
  const queryResult = useInfiniteQuery<PlayerInfoType[]>(
    ['players', selectedHeader, order, JSON.stringify(filters)],
    ({ pageParam }) => fetchPlayers({ pageParam, selectedHeader, order, filters }),
    {
      getNextPageParam: (lastPage) => lastPage[lastPage.length - 1]?.UID,
    },
  );

  return queryResult;
}

filters 부분이 문제가 있다고 판단하여, 정말 모든 방법을 다 동원해서 찾아보았지만 실패했다.

아무리 생각해도 이해가 가지않았다.

✅ 해결

역시 항상 해답은 허무하다..

isIntersecting 에 집중

한번 observer 컴포넌트에서 entry 를 콘솔로 찍어 보았다. 정말 옵션을 하나만 선택했을때만 0이 나왔다.
그러다 '에이,,,설마,,,교차영역의 문제인가?' 했다. 이유는 처음에 컴포넌트를 분리하지 않았을때는 잘되었고, UI 도 바뀐것이 없었기 때문이다.
혹시나, 정말 혹시나 하는 마음에 div 로 가장 하단에 공백을 주었더니,,, 후,,, 제대로 동작이 되었다.

<main>
  <OptionSelect />
  <Table data={data} hasNextPage={hasNextPage} fetchNextPage={fetchNextPage} isDisabled={true} />
  <div className='h-20'></div>
</main>

💭 개선

• 거의 모든 코드에 무아지경으로 터치를 하였기 때문에, 깔끔하게 원복을 해야한다.
• 이제 검색창만 구현하면 홈화면은 끝이 난다.일단은,,,