[Vanilla Javascript] 무한 스크롤(infinite scroll) 구현하기

🤔 무한 스크롤이란?

컨텐츠를 페이징하는 기법 중 하나로 스크롤을 이용해
맨 아래까지 도달할 때 새로운 컨텐츠를 불러오는 방식을 말한다.

 

🪄 구현 방식

스크롤을 끝까지 내렸을 때 fetch된 새로운 데이터를 엘리먼트에 계속 추가(appendChild)하는 방식으로 구현한다.
구현 방식은 크게 두 가지이다.

 

1. scroll 이벤트를 이용한 방법

- 전통적인 방식

- window의 scroll 이벤트가 일어날 때마다 브라우저 화면의 높이, 스크롤바의 위치를 이용해 body(컨텐츠)의 끝까지 다다랐으면 새로운 데이터를 가져오는 방식을 말한다.

 

- window.innerHeight : 클라이언트에서 보여지는 화면 중 탭, url 주소창, 북마크 탭을 제외한 브라우저의 높이

- window.scrollY : 현재 스크롤바 위치

- document.body.offsetHeight : body의 height

- window.innerHeight + window.scrollY : (탭, url 주소창, 북마크 탭을 제외한)브라우저의 높이 + 사용자의 스크롤 Y 값

- window.innerHeight + window.scrollY 값이 현재 body의 높이 값보다 같거나 큰 경우 새 데이터를 추가하는 것이다.

window.addEventListener("scroll", () => {
  // 100을 더하면 스크롤을 끝까지 내리기 100px 전에 데이터를 받아올 수 있다.
  const isScrollEnded =
    window.innerHeight + window.scrollY + 100 >= document.body.offsetHeight;

  // totalCount : api의 데이터의 전체 길이
  // photos.length: 현재 랜더링된 데이터의 길이
  const { photos, totalCount, isLoading } = this.state;
  if (isScrollEnded && !isLoading && photos.length < totalCount) {
    onScrollEnded();
  }
});

 

 

📣 isLoading의 상태 존재 이유

데이터를 이미 요청했음에도 계속 데이터를 요청하는 문제가 발생한다. 

이 경우 isLoading 상태를 두어 데이터를 요청하고 응답받기 전까지는 재요청을 하지 않도록 할 수 있다.

 

 

📣 totalCount의 존재 이유

이미 api의 마지막 데이터까지 모두 가져왔음에도 불구하고 1) 스크롤을 맨 아래 내린 상태, 2) isLoading이 false인 경우, 이 두 가지가 참일 때 계속 요청을 보내는 상황이 발생한다.

이 경우 api의 데이터 전체 개수(totalCount)와 현재까지 랜더링된 리스트의 개수(photos.length)를 비교해 해결할 수 있다.

 

 

2. Intersection Observer를 이용한 방법

- 최근에 사용하는 방식

- observe, unobserve를 사용해 구현한다.

- threshold 값으로 observe 대상이 얼마나 노출되었는지에 따라 동작하게 할 수 있다.

 

Intersection Observer 설정

첫 번째 인자로 콜백 함수, 두 번째 인자로 observer의 설정 사항을 정의할 수 있다.

 

- root: 관찰 대상이 브라우저 화면에 들어왔음을 감지하는 영역이다.

- rootMargin: 관찰 대상을 감지하는 영역을 margin을 이용해 범위를 확장할 수 있다. 기본값은 '0px 0px 0px 0px'이며, 반드시 문자열로 단위와 함께 작성해야 한다.

- threshold: 관찰 대상이 브라우저 화면 내에 얼마나 보였을 때 콜백 함수를 호출할 지 결정하는 값을 말한다.

// 첫번째 인자는 콜백함수, 두 번째 인자는 설정
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      const { photos, totalCount, isLoading } = this.state;
      // 로딩 중에는 데이터를 불러오지 않도록 해야 함
      if (entry.isIntersecting && !isLoading) {
        if (photos.length < totalCount) {
          onScrollEnded();
        }
      }
    });
  },
  {
    // 1인 경우 스크롤을 이용해 관찰 대상이 모두 보인 경우에 콜백 함수가 실행된다.
    threshold: 1,
  }
);

// 중략

this.render = () => {
  // 중략

  let $lastLi = null;

  // 다음 관찰 대상을 마지막의 리스트 요소로 한다.
  const $nextLi = $photos.querySelector("li:last-child");

  if ($nextLi !== null) {
    if ($lastLi !== null) {
      // 마지막 요소가 null인 경우에는 관찰하지 않는다.
      observer.unobserve($lastLi);
    }

    $lastLi = $nextLi;
    observer.observe($lastLi); // 관찰 대상 등록
  }
};