자바스크립트로 무한 스크롤 구현하기: Intersection Observer API

다음 화면으로 넘어가지 않아도 끊김 없이 계속해서 컨텐츠를 조회할 수 있는 무한 스크롤 기능.

이 기능을 통하여 사용자들에게 보다 뛰어난 사용자 경험을 제공할 수 있고, 웹사이트에 체류하는 시간을 증가시킬 수 있다. 웹에서는 이러한 기능을 효율적으로 작업할 수 있게 API를 제공하는데, 그것이 바로 Intersection Observer API이다.

단순 기능 구현 방법에 대해 다루기 전에, 용어를 정의하고 이러한 API가 등장하게 된 배경에 대해서 먼저 살펴보자.

Intersection Observer API란 ?

Intersection Observer API는 웹 개발에서 사용되는 기술 중 하나로, 브라우저의 뷰포트와 HTML 요소의 교차점(intersection)을 감지하는 API이다. 이 API를 사용하면 요소가 화면에 나타나거나 사라질 때 이벤트를 감지할 수 있다.

등장 배경과 이점

과거에는 무한 스크롤과 같은 기능을 구현하기 위해 페이지의 스크롤 위치를 감지하고, 사용자가 페이지의 하단에 도달하면 서버로부터 추가 컨텐츠를 조회하는 방법을 사용했다. 이 방식은 스크롤 할 때마다 이벤트가 지속적으로 발생하여 브라우저에 부하를 일으켜 성능 저하를 초래할 가능성이 높았다.

이러한 문제를 해결하기 위해 Intersection Observer API가 등장하였다. 이 API는 스크롤 이벤트를 감지하는 이전 방식과 달리, 트래킹 하고자 하는 요소의 가시성 여부만을 감지하여 필요한 작업을 수행할 수 있다. 이로써 브라우저 성능을 향상시키고 메인 스레드를 덜 점유함으로써 보다 부드러운 스크롤 경험을 웹사이트 사용자들에게 제공할 수 있게 되었다.

기능 구현

먼저 기본적인 API 사용 방법부터 확인해보자.

1) 관찰자 생성

• IntersectionObserver 생성자의 인자로 callback과 options를 할당하여 관찰자를 생성할 수 있다.

const options = {
  root: null, // 타겟으로 하는 요소의 부모 요소 (null인 경우 브라우저 뷰포트가 자동으로 설정됨)
  rootMargin: "0px", // root 요소의 Margin 값
  threshold: 0, // 타겟 요소 감지 트리거의 시점을 설정할 수 있는 값 ex) 1로 설정되는 경우 타겟 요소가 완전히 등장할 때 callback이 실행됨
};
 
const observer = new IntersectionObserver(callback, options);

2) 콜백 함수 정의

• Intersection Observer API는 콜백 함수의 인자로 감시 중인 각 대상 요소에 대한 정보가 포함된 배열을 전달해준다.

  function handleIntersection(entries) {
    entries.forEach((entry) => {
      console.log(entry)
    });
  }
 
  const options = {
    ...
  }
 
  const observer = new IntersectionObserver(handleIntersection, options);

• 반환된 정보를 브라우저 개발자 도구에서 조회해보면 아래 데이터들이 포함된 것을 확인할 수 있다.

  

• 이 데이터들 중에서 무한 스크롤 구현에 필요한 핵심 데이터는 isIntersecting 데이터이다. 이 데이터를 통해 타겟 요소가 화면에 등장하였는지 확인할 수 있다. 이 데이터가 true로 변경될 때, 컨텐츠 조회에 필요한 함수를 실행하면 무한스크롤 기능을 구현할 수 있다.

function handleIntersection(entries) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 비즈니스 로직
    }
  });
}

결과물 예시

• 리스트 최하단 도달 시, 아이템들을 추가하는 무한 스크롤 코드 예시