[JavaScript] 무한 스크롤 구현하기(Intersection Observer API)

무한 스크롤(Infinite Scroll)이란? 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(UX) 방식이다. 한 페이지 아래로 스크롤 하면 끝없이 새로운 화면을 보여주게 되고 이로 인해 많은 양의 콘텐츠를 스크롤 해서 볼 수 있다.

 

페이지네이션이 아닌 무한 스크롤로 구현하려는 이유❓

상품 목록에서 상품을 보여주고자 할 때 페이지네이션, 무한 스크롤 중 무엇이 사용자 경험을 더욱 좋게 할 수 있을지 고민한 끝에 모바일 환경을 고려해서 무한 스크롤을 사용하기로 했다.(차후에 프로젝트를 반응형으로 리팩터링 할 계획🙇🏻)

또한, 다음 상품을 보기 위한 사용자의 클릭을 최소화하고 더 쉽게 다양한 상품을 볼 수 있을 것이라고 판단했다.

 

구현하는 과정

무한 스크롤을 구현하는 방법은 스크롤을 할 때마다 이벤트를 발생시키는 방법(addEventListener가 중복해서 쌓이고 복잡한 로직이 섞여 있으면 성능 이슈가 발생) 등 다양하다. 그중에서 나는 Intersection Observer API의 IntersectionObserver 인터페이스를 이용해서 구현하였다.

 

🧐 IntersectionObserver 인터페이스란?

기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지, 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공한다.

이 기능은 비동기적으로 실행되기 때문에, scroll 같은 이벤트 기반의 요소 관찰에서 발생하는 렌더링 성능이나 이벤트 연속 호출 같은 문제 없이 사용할 수 있다.

 

1) IntersectionObserver 인스턴스 생성

• new IntersectionObserver()를 통해 생성한 인스턴스(observer)로 관찰자를 초기화하고 관찰할 대상(element)을 지정한다.
• 생성자는 2개의 인수(callback, options)를 가진다.

const observer = new IntersectionObserver(callback, options); // 관찰자 초기화
observer.observe(element); // 관찰할 대상(요소) 등록
// observer.unobserve(element); // 특정 대상(요소)에 대한 관찰 중단

 

2) callback 함수 만들기

• 관찰할 대상(target)이 등록되거나 가시성(보이는지, 보이지 않는지)에 변화가 생기면 관찰자는 콜백(callback)을 실행한다.
• 콜백은 2개의 인수(entries, observer)를 가진다.

const callback = (entries, observer) => {};

 

entries

• IntersectionObserverEntry 인스턴스의 배열이다.
• IntersectionObserverEntry는 읽기 전용의 속성들을 포함한다. 여러 속성들이 존재하지만 직접 사용한 isIntersecting은 관찰 대상의 교차 상태(Boolean)를 알려주는 속성이다. 나머지 속성들은 다음 링크를 참고해보자❗️

 

observer

콜백이 실행되는 해당 인스턴스를 참조한다.

const callback = (entries, observer) => {
    console.log(observer);
};

 

3) options 객체 만들기

const options = {
    root: null,
    rootMargin: '0px 0px 0px 0px',
    threshold: 0,
};

 

root

• 타켓의 가시성을 검사하기 위해 뷰포트 대신 사용할 요소 객체(루트 요소)를 지정한다.
• 기본값은 null(뷰포트) 이다.

 

rootMargin

• 바깥 여백(margin)을 이용해 root 범위를 확장하거나 축소할 수 있다.
• css의 margin과 같이 4단계로 여백을 설정할 수 있으며, px 또는 %로 나타낼 수 있다.
• 기본값은 '0px 0px 0px 0px'이며 단위를 꼭 입력해야 한다.

 

threshold

• 옵저버가 실행되기 위해 타켓의 가시성이 얼마나 필요한지 백분율로 표시한다.
• 기본값은 Array 타입의 [0]이지만 Number 타입의 단일 값으로도 작성할 수 있다.
  • 0: 타켓의 가장자리 픽셀이 root 범위를 교차하는 순간(타켓의 가시성이 0%일 때) 옵저버가 실행된다.
  • 0.3: 타켓의 가시성이 30%일 때 옵저버가 실행된다.
  • [0, 0.3, 1]: 타켓의 가시성이 0%, 30%, 100%일 때 모두 옵저버가 실행된다.

 

🧑🏻‍💻 구현한 전체 코드

/*
<div>
  <ul></ul>
  <div id="listEnd"></div>
</div>
*/

const listEnd = document.querySelector('#listEnd'); // 관찰할 대상(요소)
const options = {
    root: null, // 뷰포트를 기준으로 타켓의 가시성 검사
    rootMargin: '0px 0px 0px 0px', // 확장 또는 축소 X
    threshold: 0, // 타켓의 가시성 0%일 때 옵저버 실행
};

let page = 0;
const onIntersect = (entries, observer) => {
  entries.forEach(async (entry) => {
    if (entry.isIntersecting) {
      console.log('무한 스크롤 실행');
      page++;
      console.log('page: ' + page);
      const products = await getData( // 상품의 데이터를 가져오는 함수
        page,
        urlCategoryId,
        urlKeywordId,
        urlSortId
      );

      if (products.length < 1) {
          if (page === 1) productList.innerHTML = noSearchResultPage;
          observer.unobserve(listEnd); // 특정 대상(요소)에 대한 관찰 중단
          return;
      }

      productList.insertAdjacentHTML(
        'beforeend',
        products.map(createTicket).join('')
      );
    }
  });
};
  
const observer = new IntersectionObserver(onIntersect, options); // 관찰자 초기화
observer.observe(listEnd); // 관찰할 대상(요소) 등록

 

📚 참고한 사이트

Intersection Observer - 요소의 가시성 관찰

Intersection Observer API - Web APIs | MDN

javascript . 어떻게 무한 스크롤을 구현하시나요?