Fix/infinite scroll : 무한스크롤 에러 수정

[Ko-Eunseo]

1 #19

문제발생

스크롤이 없는 경우(화면이 충분히 큰 경우) 무한스크롤 기능 작동하지 않음.

문제 발생 원인

ref가 update되지 않아 발생한 문제.

• useRef의 객체는 바뀌지 않기 때문에 target.current 값이 바뀌었다고 해도 useEffect가 변화를 감지하고 값을 업데이트하지 않았다.
• useRef는 읽기전용이어서 업데이트되지도 않고, 리렌더링되지 않고, 재할당할 수 없다.

바뀐부분

• [x] 로딩 컴포넌트를 만들어서 ref를 주었습니다.
• [x] observer를 사용해서 로딩 컴포넌트가 화면에 나타나는 경우에 다음 페이지를 로드합니다.

hook 사용법

  const target = useRef<HTMLDivElement>(null); // 1. ref(target)가 필요합니다.
  const { isLoading, scrolledData, isNextPage } = useInfiniteScroll<ArtistData>( //2. url이 필요합니다.
    {
      apiUrl: "/api/artist",
      target,
    }
  );

ref는 Loading 컴포넌트를 쓰는 것을 추천합니다.

{(isLoading || isNextPage) && <Loading ref={target} />} //로딩중이거나 다음페이지가 존재할 때 로딩 컴포넌트가 나타나도록 작성.