무한스크롤과 Intersection Observer API

무한 스크롤(Infinite scroll)을 지원하는 News Viewer를 구현하는 과제를 진행하며 배우게 된 개념들을 정리해보았습니다.

만약 부족한 부분이나 잘못된 정보가 있는 경우 알려주세요🤗

무한스크롤(Infinite Scroll)

사용자에게 콘텐츠를 보여주는 방식으로는 크게 무한스크롤링을 이용하는 방식과 페이지네이션 기능을 이용하는 방식으로 나뉩니다.

그 중 무한 스크롤링은 사용자가 무언가 흥미로운 콘텐츠를 보기 위해 목적 없이 검색하는 상황에서 더 적절합니다. 모바일 기기에도 매우 효과적이라는 장점 또한 있습니다.

반면 스크롤바에 기반해서 스크롤이 진행될 때마다 정의한 함수가 실행되도록 하는 방식으로 이런 경우 굉장히 많은 리소스가 낭비가 된다는 단점이 있었습니다.

이러한 문제점을 해결해준 것이 바로 Intersection Observer API로,Intersection Observer API 를 사용하며 자바스크립트 엔진과는 상관없이 브라우저단에서만 무한스크롤 로직을 검사하고, 조건을 통과하는 경우에는 자바스크립트의 코드로 데이터를 불러오기에 브라우저의 성능을 향상시킬 수 있습니다.

Intersection Observer API

Intersection Observer API는 관찰하고자 하는 대상(target)과 root의 교차 발생을 비동기적으로 관찰을 하며 두 요소의 교차부분이 변경될 때마다 등록한 콜백함수를 실행할 수 있도록 도와줍니다.

즉, 사이트는 두 요소의 교차를 지켜보기 위해 메인 스레드를 사용할 필요가 없어지고 브라우저 단에서 원하는대로 교차영역 관리를 최적화할 수 있습니다.

MDN문서에서 보다 자세한 내용을 확인할 수 있습니다.

Intersection Observer API의 사용방법은 다음과 같습니다.

//1. Intersection observer 설정
const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.4 //target요소가 root에 지정된 요소내에서 40% 보여질 때 콜백이 호출
}

const observer = new IntersectionObserver(callback, options);

//2. 관찰할 요소 타겟팅
const target = document.querySelector('.scroll-observer');
observer.observe(target);

Callback

• target과 root가 교차되어 화면에 보이게 되었을 떄 호출되는 함수로, entries와 observer를 매개변수로 받습니다.
  • entries : IntersectionObserverEntry 객체들을 배열로 반환. 요소 각각을 참조하기 위해서는 forEach를 통해 개별적으로 접근해야합니다.
  • observer: 콜백이 호출되는 IntersectionObserver instance
    
    

Options

• 옵션을 통해 콜백이 호출되는 상황을 조작할 수 있습니다.
  • root : 관찰대상이 화면에 들어왔음을 감지하는 영역으로, 기본값은 null(Viewport)
  • rootMargin: 관찰 대상을 감지하는 영역을 영역 바깥 범위(Margin)까지 확장. 기본 값은 0px 0px 0px 0px'이며, 옵션값을 지정할 때는 문자열로 단위와 함께 작성해야 합니다.
  • threshold: 관찰 대상이 화면 내에 얼마나 들어 왔을 때 콜백 함수를 호출할 지 결정하는 값. 기본값은 0(0%). 최대 1(100%)까지 지정 가능

무한스크롤 프로젝트에 적용을 한 예시는 아래와 같습니다.

<section class="news-item"></section>
<div class="scroll-observer"></div>

    const loadNews = async ( category = 'all', page, pageSize) => {
      try {
        const response = await getNews(category, page, pageSize)
        showNews(response)

      } catch (error) {
        console.error(error.message)
      } 
    }

    const scrollEl = document.querySelector('.scroll-observer');

    const listMoreObserver = new IntersectionObserver(
      async ([entry]) => {
        if (entry.isIntersecting) { 
          page++ // target과 root가 교차된 상태인 경우 page를 추가한 후 콜백함수 실행
          loadNews(category, page, pageSize);
        }
      },
      { threshold: 0.4 }
    );

    listMoreObserver.observe(scrollEl);

isIntersecting

• target과 root가 교차된 상태인지 아닌지를 boolean값으로 반환합니다.
• MDN에서 더 많은 IntersectionObserverEntry Properties를 확인할 수 있습니다.