밍부스 ) 리액트로 무한스크롤 구현하기

우선 백엔드가 있다면 , limit와 offset을 몇으로 할 지 정하고 시작해야 한다, 그리고, 페이지를 쿼리스트링으로 어떻게 보낼지 정한 뒤에 시작해야 한다.

const [error, setError] = useState(false);
  if (error == true) {
    console.log("마지막 페이지 입니다.");
  }
  const [loadingToggle, setLoadingToggle] = useState(false);

  const [page, setPage] = useState(1);

  //!무한스크롤 기능구현--------------
  const handleScroll = () => {
    const scrollHeight = document.documentElement.scrollHeight;
    const scrollTop = document.documentElement.scrollTop;
    const clientHeight = document.documentElement.clientHeight;
    console.log("스크롤 이벤트 발생");
    if (scrollTop + clientHeight >= scrollHeight) {
      console.log("페이지 끝에 스크롤이 닫았음. ");
      //페이지 끝에 스크롤이 닫으면 page+1을 해준다. 
      setPage((prev) => prev + 1);
    }
  };

  const getData = () => {
    //page를 쿼리스트링으로 보낸다. 
    //나의 경우 에러처리를 미들웨어에 함수를 보내 처리하였다. 
    dispatch(getPosts({ page, setError }));
  };
  //페이지가 달라질 때마다 getData함수를 호출
  useEffect(() => {
    getData();
  }, [page]);

  //!스크롤이 될때마다 발생
  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);