Intersection Observer란? Element를 비동기적으로 관찰하는 방법 알아보기

 

 

웹 최적화를 공부하다가 Intersection Observer API에 대해 알게되었다.

자바스크립트에 내장된 기능인데 나름 재밌어서 포스팅을 해두고자 한다.

 

 

 

---

 

 

 

Intersection Observer는 어떤 기능을 제공할까?

간단하게 설명하자면

HTML 내부 Element 중 내가 관찰하고 싶은 Element에 Intersection Observer를 걸어두면,

화면 안에 해당 Element가 보여지는 순간 Observer에 내가 지정해둔 콜백 함수가 실행된다.

 

 

공식 문서 를 보면 해당 기능을 언제 사용하면 유용한지 친절하게 설명이 되어있다.

 

 

특히 스크롤과 연관이 깊을 듯 하다

 

 

 

 

첫 번째 줄의 이미지 지연 로딩 (이미지를 한번에 로드하지 않고 필요할 때 로드하는 최적화 기술) 이 최적화를 공부하면서 알게된 기법인데,

해당 포스팅에서는 Intersection Observer가 어떻게 동작하는지만 기록해두려고 한다.

 

 

 

---

 

 

 

 

리액트 기준으로 어떻게 사용할 수 있는지 예제를 기록했다.

useEffect(() => {
  const callback = (elements, observer) => {
    elements.forEach(element => {
	  if (element.isIntersecting) {
	    console.log('해당하는 Element가 보여질 때만 아래 코드 실행')
		  
        	// 화면 안에 들어왔을 때 내가 하고싶은 코드 작성
          
		// 더이상 observer가 필요 없어지면 관찰 해제
		observer.unobserve(entry.target)
	  }
	});
  }
  const options = {}
  const observer = new IntersectionObserver(callback, options)
	
  observer.observe(myRef.current)
}, [])

 

<div ref={myRef}/>

• Observer 객체는 한번만 생성해도 되기 때문에 useEffect 안에 넣었다. 한번만 진행되게끔 deps는 비워두었다.
• 바라보고 있는 Element가 여러개일 수 있기 때문에 elements는 배열로 넘어온다. 모두 순회하게끔 forEach를 사용했다.
• element.isIntersecting은 화면 안에 element가 들어올 때 true를 반환한다. 
  해당 조건으로 분기 처리를 안해두면 화면 밖으로 element가 나갈 때도 콜백이 실행되기 때문에
  화면 안에 들어올 때만 실행되도록 했다.
• 더이상 필요없어질 때는 unobserve를 해주자. 계속 관찰을 한다면 오히려 리소스가 낭비될 수 있다.
• useRef를 사용해 내가 관찰하고 싶은 Element를 ref로 설정 (위 코드에서는 myRef)

 

 

 

위 코드를 적용한다면, 화면 안에 내가 관찰하고 있는 Element가 보여지는 순간에 내가 원하는 행동을 할 수 있을 것이다!

 

 

 

---

 

 

 

 

최적화 뿐만 아니라 사용자의 반응에 따라 수행되어야 하는 기능이 있을 때

유용한 API라고 생각한다. 유용하고도 재밌는 기능...

 

 

 

 

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