Firebase 무한스크롤을 직접 구현해보자..

우선 스크롤로 바닥을 찍었을 때를 알기 위해 라이브러리를 설치해서 import했다.

import { useBottomScrollListener } from "react-bottom-scroll-listener";

import후 다음과 같이 callback을 전달해주면 된다.

useBottomScrollListener(callback) // 스크롤로 바닥을 찍으면 콜백을 전달해줌

callback의 내용으로는, 최초의 불러온 데이터 이후의 데이터를 불러오는 로직을 짜주었다.

useBottomScrollListener(() => {
  // lodash의 debounce를 사용하여 스크롤 바닥을 찍는 순간 계속 콜백이 오는 문제를 해결
  const loadData = _.debounce(async () => {
    // 불러올 데이터가 있는지 알려주는 문구이자, 이것을 비교함으로 함수가 작동해야 하는지를 따져봄
    if (dataPresent == "If you scroll, the data will be loaded.") {
      console.log("bottom! load new  data..");
      // 스켈레톤 디자인 표시를 활성화함
      setIsMoreLoading(true);
      // 마지막 데이터 위치를 기억 (마지막 데이터 이후의 데이터를 불러와야 하기 때문)
      const lastImg = images[images.length - 1];
      const photo = collection(getFirestore(firebaseApp), "photo");
      const result = await getDocs(
        query(
          photo,
          orderBy("timestamp", "desc"),
          limit(6), // 6개씩 불러옴
          startAfter(lastImg.timestamp) // 마지막 데이터 이후의 데이터를 불러와야 함
        )
      );

      const fetchData = result.docs.map((el) => el.data());
	  
      // 불러올 이미지가 없을 때, 작동을 안하게 처리해줘야 함
      if (fetchData.length === 0) {
        setIsMoreLoading(false);
        setDataPresent("There is no more data.");
        console.log("All images are loaded.");
        return;
      }
	  
      // 기존의 불러온 데이터와 이후의 추가로 불러온 데이터를 합침
      setImages([...images, ...fetchData]);
      console.log(images);
      // 불러왔으니 스켈레톤 디자인 표시를 비활성화함
      setIsMoreLoading(false);
    }
  }, 500);

  loadData();
});

🤔 스크롤 바닥을 찍는순간, 마지막 데이터가 나올 때까지 콜백이 계속해서 작동하는 문제가 있었고, 그것을 lodash의 debounce를 사용해서 해결하였다.