[JavaScript] IntersectionObserver

💡 IntersectionObserver

뷰포트 사이의 교차 영역을 감시하고, 해당 교차 영역에 대한 정보를 제공하는 API다.
이를 통해 스크롤, 무한스크롤, 이미지 로딩 등 다양한 기능을 구현할 수 있다.

IntersectionObserver의 주요 특징

1. 비동기적 감시
IntersectionObserver는 비동기적으로 요소의 교차 상태를 감시한다.
2. 비동기적 콜백 실행
교차 영역이 변경되면 콜백 함수가 호출된다.
이를 통해 교차 영역의 변화에 따라 동작을 처리할 수 있다.
3. 루트 요소와 타겟 요소
교차 영역을 관찰하는 요소 루트(root)
교차 영역을 감시하는 대상 요소 타겟(target)
루트 요소는 대상 요소와 교차하는 영역을 관찰하고, 루트 요소의 기본 값은 뷰포트다.
4. 교차 상태 정보
콜백 함수에 전달되는 인자에는 교차 상태 정보가 포함된다.
이 정보는 대상 요소와 루트 요소 간의 교차 영역에 대한 정보를 제공한다.

IntersectionObserver 사용 범위

무한스크롤
스크롤을 내일 때 새로운 데이터를 동적으로 로드하는데 사용된다.
이미지 로딩 지연
이미지가 뷰포트 내에 진입했을 때 이미지를 로드하도록 할 수 있다.
광고 트래킹
광고가 화면에 보이는지 여부를 감시하거나, 광고의 표출 횟수를 추적하는 데 사용된다.
웹 페이지 분석
특정 컨텐츠의 가시성과 사용자의 스크롤 동작을 분석하는데 활용된다.

IntersectionObserver 사용 예시

스크롤이 됐을 때, 마지막 아이템이 감지되면 다음 데이터들이 뿌려지는 무한스크롤 코드로 예시를 들어보자.

listObserver = new IntersectionObserver((items, observer) => {
  items.forEach((item) => {
	// 아이템이 화면에 보일 때
  	if (item.isIntersecting){
    	// 이미지를 로드한다
      	item.target.querySelector('img').src = item.target.querySelector('img').dataset.src;
                                                                         
	  	// 마지막 요소안자 확인
        let dataIndex = Number(item.target.dataset.index);
      	// 마지막 요소라면
      	if (dataIndex + 1 === this.data.length){
          	// nextPage를 호출한다
        	this.onNextPage();
        }
    }
  });
});

item.isIntersecting은 해당 아이템이 현재 뷰포트에 보이는지를 나타내는 불리언 값이다.

item.target.querySelector('img').src = item.target.querySelector('img').dataset.src;

아이템이 화면에 보이면 이미지의 'src'속성을 해당 이미지 요소의 data-src속성값으로 변경해 이미지를 로드한다.
속성값을 사용해 이미지를 로드하는 이유는 지연로딩(lazy loading)을 구현하기 위해서다.
지연 로딩은 웹 페이지의 성능을 향상시키기 위한 방법 중 하나로, 초기 로딩 시에는 이미지를 실제로 로드하지 않고 필요할 때만 로드하는 방식을 의미한다.
이를 통해 초기 페이지 로딩 시간을 줄일 수 있다.

let dataIndex = Number(item.target.dataset.index);
해당 아이템의 인덱스를 가져와준다.

dataIndex + 1 === this.data.length
해당 아이템이 데이터의 마지막 아이템인지의 여부를 확인해준다.
dataIndex에 1을 더해준 이유는 배열의 인덱스가 0부터 시작하기 때문에, 마지막 아이템을 확인해 주기 위해 +1을 추가했다.

render() {
	~~~~렌더되는 녀석들
    this.$result.querySelectorAll('.item').forEach(($item, index) => {
    	this.listObserver.observe($item);
    });
}

이제 render되는 영역에서 화면에 뿌려진 아이템들에 observe를 넣어준다.
이렇게 하면 마지막 아이템이 화면에 보일 때 새로운 이미지가 로딩되며 무한 스크롤이 가능해진다.