인피니티 스크롤을 이용한 리스트 렌더링

const handleScroll = () => {
  const scrollHeight = document.documentElement.scrollHeight;
  const scrollTop = document.documentElement.scrollTop;
  const clientHeight = document.documentElement.clientHeight;
  if (scrollTop + clientHeight >= scrollHeight) {
    // 페이지 하단에 도달하면 추가 데이터를 요청
    onFetchMore();
  }
 };

useEffect(() => {
  // scroll event listener 등록
  window.addEventListener("scroll", handleScroll);
  return () => {
    // scroll event listener 해제
    window.removeEventListener("scroll", handleScroll);
  };
});

useEffect와 handleScroll을 이용하여 브라우저가 맨 하단에 위치해있을 때, 추가적으로 쿼리를 보낼 수 있도록 onFetchMore 함수를 실행한다.

• scrollHeight는 화면에 보이지 않는 높이도 포함된 페이지의 총 높이이다.
• scrollTop은 이미 스크롤되어서 보이지 않는 구간의 높이이다.
• clientHeight는 클라이언트, 즉 사용자에게 보여지는 페이지의 높이이다.

따라서 "이미 스크롤되어 보이지 않는 구간의 높이"와 "사용자에게 보여지는 페이지의 높이"를 합한 값이 "화면에 보이지지 않는 높이가 포함된 총 높이"보다 크거나 같아졌을 때, 추가적으로 요청을 보내게 된다.

 const onFetchMore = () => {
    fetchMore({
      variables: {
        page: data?.seeCoffeeShops.length,
        keyword,
      },
      updateQuery: (prev, { fetchMoreResult }) => {
        if (!fetchMoreResult) {
          return prev;
        }
        if (fetchMoreResult.seeCoffeeShops.length === 0) {
          return;
        }
        return Object.assign({}, prev, {
          seeCoffeeShops: [
            ...prev.seeCoffeeShops,
            ...fetchMoreResult.seeCoffeeShops,
          ],
        });
      },
    });
  };

위는 추가적으로 요청을 보내는 함수이다.
page는 건너뛰는 요소의 갯수, 즉 이미 받아온 데이터의 갯수만큼 건너뛰게 되며 keyword는 검색어이다.
그리고 updateQuery 속성을 이용하여 추가적으로 받아온 데이터를 기존의 데이터에 병합하도록 작성하면 된다.

참고자료
https://medium.com/@_diana_lee/react-infinite-scroll-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-fbd51a8a099f