[JavaScript] 옵저버 패턴 - IntersectionObserverAPI

✔ Intro

Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법이다. 일반적으로 알려진 해결방법은 신뢰성이 부족하고 브라우저나 사이트에 부하를 주기 때문에 좋지 못한 사용자 경험을 낳는다.

 

 Intersection Observer API 는 콜백 함수를 등록할 수 있어 감시하고자 하는 요소가 다른 요소(viewport)에 들어가거나 나갈 때, 요청한 부분만큼 두 요소의 교차 부분이 변경될 때마다 실행될 수 있다. 즉, 사이트는 요소의 교차를 지켜보기 위해 메인 스레드를 사용할 필요가 없고 브라우저는 원하는 대로 교차 영역 관리를 최적화할 수 있다.

 

뉴스 무한스크롤을 구현하면서 사용했던 옵저버 패턴 코드 일부도 함께 첨부한다.

 

 

✔ Observe의 flow

• 관찰자를 생성한다
• 관찰 타겟을 생성한다
• 관찰자는 관찰 타깃을 관찰한다
• 관찰 대상의 가시성이 변경될 때마다 콜백 함수를 실행한다

 

✔ Intersection observer 생성

💡 exam - mdn

let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

intersection observer를 생성하기 위해서는 생성자 호출 시 콜백 함수를 함께 제공한다. 이 콜백 함수는 threshold가 한 방향 혹은 다른 방향으로 교차할 때 실행된다.

threshold: 1.0 은 관찰 타겟이 root에 지정된 요소 내에서 100% 보여질 때 콜백이 호출될 것을 의미한다

 

 

💡 exam - my code

const observer = new IntersectionObserver(onScroll, { threshold: 0.7 });

threshold: 0.7 옵션을 함께 전달했다. 타겟 요소가 70% 보여질때 콜백 함수 onScroll이 호출된다

 

 

✔ Target 설정

💡 exam - mdn

let target = document.querySelector('#listItem');
observer.observe(target);

 

💡 exam - my code

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

관찰자에 대해 설정한 콜백이 이제 처음으로 실행된다
관찰자에게 타겟을 할당할 때까지 대기한다(현재 타겟이 보이지 않더라도)

 

 

✔ 조건 만족, Callback

💡 exam - my code

let page = 1;

const loadPost = async category => {
  showLoader();
  try {
    const response = await getPost(category);
    NewsList(response);
  } catch (error) {
    console.error(error);
  } finally {
    hideLoader();
  }
};

const onScroll = () => {
  page++;
  loadPost(category);
};

const observer = new IntersectionObserver(onScroll, { threshold: 0.7 });
const target = document.querySelector('.scroll-observer');
observer.observe(target);

wrapper의 최하단 .scroll-observer 클래스를 가진 타겟 대상이 70% 보여질때 onScroll 콜백 함수를 실행한다. ( loadPost, NewList 함수는 데이터를 받아와 DOM을 생성하고 채워주는 구조) 

 

 

📖 결과

Intersection Observer API로 간단하게 무한 스크롤을 구현할 수 있었다.

무한 스크롤 같은 경우는 최하단 요소 앞에 새로운 DOM을 붙여주기 때문에 관찰 타겟을 고 정해도 됐지만, 새로운 데이터를 가져오고 관찰 타겟이 바뀌어야 한다면, 타겟을 새로 바꾸어 주어야 한다.

forEach로 여러 요소들에 옵저버 패턴을 적용한다면 다방면으로 활용할 수 있을 것 같다.

또한, React에서 해당 로직들을 커스텀 훅으로 만들어 다른 프로젝트에도 유용하게 사용해보자.

 

무한스크롤 구현 예

 

 

참고자료

https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API