scroll 이벤트를 사용한 무한 스크롤 구현

프로젝트 당시에는 Throttling & debouncing에 대해 학습할 시간도 없어서 ; 이벤트 리스너로만 진행했었던 부분이다.

 

문서 정리하다 보니까 이젠 Intersection Observer API를 사용하는 방식을 많이 쓴다고 해서,

다음 프로젝트에는 Intersection Observer API에 대해 학습하고 이걸로 무한스크롤을 구현했다. 

➡️ Intersection Observer API를 사용한 무한스크롤 구현 📑

 

여기서는 백에서 처음에 5개 잘라서 보내주신 걸 받아서, 스크롤 이벤트에 +5개 항목 씩 더해서 보여주는 것으로 진행했다.

 

 

 

const handleScroll = () => {
  const windowHeight = window.innerHeight; // 현재 브라우저 창의 높이
  const documentHeight = document.documentElement.scrollHeight; // 문서의 총 높이
  const scrollTop = window.scrollY || document.documentElement.scrollTop; // 현재 스크롤 위치

  // 창의 높이 + 스크롤 위치를 더한 값이 문서의 전체 높이에서 -100px 한 값보다 작거나 같을 경우 이전 항목에 5를 더해 새로운 offset 설정
  if (windowHeight + scrollTop >= documentHeight - 100 && !loading) {
    setOffset(prevOffset => prevOffset + 5);
  }
};

useEffect(() => {
  window.addEventListener('scroll', handleScroll);
  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
}, []);