5 . 🚀 Intersection Observer

Eunsu·2021년 12월 29일

@ React

목록 보기

5/11

넥스트로 만든 프로젝트에서 스크롤값에 따라서 해더가다르게 다르게 구현했는데 스크롤 이벤트에 대해서 쫌 공부해볼 필요가 있는 것 같아서 intersection Observer에 대해서 공부해보려고 한다.

✨ Intersection Observer

❓ Intersection Observer란

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

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

◼ Intersection Observer 사용이유

사용이유를 살펴보기 전 Intersection이라는 의미에 대해서 알아볼 필요가 있다. Intersection이란 교차점,교집합이라는 의미를 갖고 있다.
intersection observer는 교차점을 관측하기 위해서 사용하는 API라는 의미를 갖고 있는것을 알 수 있다.

즉, Target Element 가 화면에 노출되었는 지 여부를 간단하게 구독할 수 있는 API 이다.

예를 들어, intersection observer가 없이 구현한다고 한다면, scroll이 일어날 때 마다, 특정 element가 화면에 존재하는지에 대한 여부를 계속 계산하는 code를 만들어야 한다. 하지만 intersection을 사용한다면 쉽게 사용여부를 확인 할 수 있다.

◼ MDN에서 제안한 적용 상황들

1. 페이지 스크롤 시 이미지를 Lazy Loading할 때
2. Infinite scrolling을 통해 스크롤을 하며 새로운 콘텐츠를 불러올 때
3. 광고의 수익을 계산하기 위해 광고의 가시성을 참고할 때
4. 사용자가 결과를 볼 것인지에 따라 애니메이션 동작 여부를 결정할 때

Lazy Loading이란?
- 페이지를 불러오는 시점에 당장 필요하지 않은 리소스들을 추후에 로딩하게 하는 기술. 즉, 사용자가 보지 않을때는 당장 로딩하지 않고, 나중에 사용자가 필요로 하는 시점에 로딩하는 기술
- infinite scrolling 과 placeholder가 Lazy Loading의 예시

◼ Intersection Observer 생성, API

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

const observer= new IntersectionObserver(callback,options)

◼ callback

const intersectionObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      console.log(entry);
      observer.unobserve(entry.target);
    }
  });
});
intersectionObserver.observe(document.getElementById("app"));

◾ entries

entries는 IntersectionObserverEntry 인스턴스의 배열이다.
IntersectionObserverEntry는 읽기 전용(Read only)의 다음 속성들을 포함한다.

boundingClientRect(DOMRectReadOnly): 관찰 대상의 사각형 정보

intersectionRect(DOMRectReadOnly): 관찰 대상의 교차한 영역 정보

intersectionRatio: 관찰 대상의 교차한 영역 백분율(intersectionRect 영역에서 boundingClientRect 영역까지 비율, Number)

isIntersecting(Boolean): 관찰 대상의 교차 상태

rootBounds(DOMRectReadOnly): 지정한 루트 요소의 사각형 정보

target(Element): 관찰 대상 요소

◾ observer

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

◼ options

let options={
	root: document.querySelector('#target'),
    	rootMargin:'0px',
    	threshold:1.0
}
let observer = new IntersectionObserver(callback, options);

◾ root

타겟의 가시성을 검사하기 위해 뷰포트 대신 사용할 요소 객체를 지정한다.
타겟의 조상 요소이여야 하며, 지정하지 않거나 null일 경우 브라우저의 뷰포트가 기본 사용된다.

◾ rootMargin

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

◾ threshold

observer의 콜백이 실행될 대상의 가시성 %를 나타내는 단일숫자, 배열이다.
만약 50% 만큼의 요소가 보여졌을 때를 탐지하고 싶다면 0.5로 설정해주면 된다.
기본값은 0이며, 1.0은 요소의 모든 픽셀이 화면에 노출되기 전에는 콜백시키지 않음을 의미한다.

◻ Method

const observer= new InterSectionObserver((entries) => {
	entries.forEach(entry => console.log(entry))
},{threshold:0.3});
const target= document.querySelector('#element');
oberver.observe(target) //  관찰시작
observer.unobserver(target) //  관찰 중지
observer.disconnect() // IntersectionObserver 인스턴스가 관찰하는 모든 요소 관찰 중지

◾ observer : 대상 요소의 관찰을 시작한다.

parameter : IntersectionObserver 타겟

◾ unobserver : 대상 요소의 관찰을 멈춘다.

parameter : IntersectionObserver 타겟
콜백의 두번째 인자가 observer가 해당 인스턴트를 참고하므로 다음과 같이 사용 가능.

const observer= new InterSectionObserver((entries,observer) => {
	entries.forEach(entry => {
    	if(!entry.isIntersection){
        return false;
        //교차 상태가 아닐 때 return
        }
        //관찰대상이 교차상태일때만 실행
        console.log('교차상태 확인:',entry.isIntersection);
        //위 실행을 처리하고 관찰 중지.
        observer.unobserve(entry.target);
    })
},{threshold:0.3});

◾ disconnect() : IntersectionObserver 인스턴스가 관찰하는 모든 요소의 관찰을 중지한다.

paramteter: 없음.

🎉 결론

보통 scroll event가 실행되게 되면 스크롤이 일어날때마다 발생되기 때문에 스크롤을 내릴 때 마다 실행된다. 그래서 해더부분을 다르게 처리하거나 스크롤 애니메이션을 실행할 때 불필요한 이벤트가 많이 발생되게 된다.
Intersection Observer를 사용하게 되면 viewport 기준으로 이벤트가 발생되고, 기준으로 할 탐색 할 타겟을 지정할 수 있기때문에 불필요한 이벤트가 일어나지 않는다.
솔직히 페이지를 서버에 배포해본적이 없어서 이벤트가 많이 일어나서 생기는 이슈와 약점들을, dev모드에서는 속도차이가 크게 나지 않기때문에 크게 느낄 수 없었다. 하지만 프로젝트의 사이즈가 커진다면 이 부분은 큰 이슈가 될 수 있다고 생각된다.
다음 포스팅은 IntersectionObserver를 사용한 무한 스크롤 구현하기!

출처