Intersection Observer API
intersectionObserver는 상위 요소 혹은 최상위 document의 viewport와 대상 요소와의 교차점에서 변경 사항을 비동기적으로 관찰하는 방법을 제공하는 API 입니다.
탄생 배경
IntersectionObserver가 생기게 된 대표적인 이유는 다음과 같습니다 :
- 웹페이지가 스크롤 될 때 마다 이미지와 같은 컨텐츠의 지연 로딩
- 사용자가 스크롤 할 때 마다 더 많은 정보를 로드 하기위한 ‘무한 스크롤’ 구현을 위해서
- 광고 수익 계산을 위한 광고 가시성 보고
- 사용자에게 결과가 표시되는지 여부에 따라 작업 혹은 애니메이션을 실행할지 여부를 결정하기 위해서
위 이유들을 살펴보면, 사용자가 현재 어떤 화면을 어떻게 보고있는지 고민하고 있다는 생각이 듭니다. 🤔
Intersection Observer API에 대해서 더 알고 싶으시다면 MDN 문서에 자세히 나와있습니다.
리액트에서 Intersection Observer API 사용하기
그럼 리액트에서 Intersection Observer API를 사용하는 방법에 대해서 살펴보겠습니다.
아래 움짤은 사용자가 보고 있는 색상이 변경될 때 마다 해당하는 Hex 값으로 변경해주고 있습니다.
어떤 방법으로 사용자가 현재 보고있는 색상 값을 알 수 있을까요?!
저는 onscroll 이벤트를 활용하여 사용자가 스크롤 하고 있는 위치와 각 색상의 상대적인 위치 값을 비교하여 특정 위치에 도달하면 Hex 값을 알맞게 변경해주는 방법이 가장 먼저 떠오릅니다. 😃
하지만.. 사용자가 브라우저의 크기를 조정하게 되면 어떻게 될까요?
브라우저 크기가 조정되기 전의 상대적 위치 값을 가지고 비교하게 되어 원하는 동작을 구현할 수 없게 됩니다. (물론 이런 경우 resize 이벤트를 활용할 수 있습니다!)
Intersection Observer API를 활용하면 이러한 문제를 조금 더 쉽게 해결할 수 있습니다. 👍
1. Intersection Observer API 정의하기
먼저 IntersectionObserver 인스턴스를 생성합니다. IntersectionObserver 의 첫번째 파라미터는 콜백 함수, 두번째 파라미터는 인스턴스를 초기화 할 때의 옵션입니다.
두번째 파라미터를 먼저 살펴보면, root 는 해당 요소의 가시성을 확인하기 위한 뷰포트가 되는 요소입니다. 대상 요소 보다 상위 요소이어야 하며, null 인 경우는 브라우저가 기본 뷰포트입니다.
rootMargin 은 교차점을 계산하기 전에 root 요소의 경계 값을 줄이거나 늘이는데 사용됩니다.
마지막으로 threshold 는 설정된 값(비율)만큼 콜백 함수를 호출하는 역할을 합니다. 0 ~ 1 사이의 값을 가집니다.
위 코드에서는 threshold 값이 0.5로 설정되어 있기 때문에 사용자가 해당 요소를 50% 보게되면 콜백함수가 실행되게 됩니다.
2. IntersectionObserver가 요소를 관찰하도록 하기
IntersectionObserver 인스턴스를 생성했다면 인스턴스가 원하는 요소들을 관찰하도록 해야합니다.
저는 빨주노초파남보 7개의 요소가 있으므로 useRef 를 활용하여 IntersectionObserver 가 각 요소를 관찰하도록 설정해주었습니다. ( useRef 사용법은 생략하겠습니다.)
이제 관찰할 준비가 끝났습니다!
3. 동작확인하기
이제 잘 동작하는지 확인하면됩니다. 😚
먼저 화면을 스크롤 할 때 마다 사용자가 특정 색상을 절반 정도 본 경우 콜백함수가 잘 호출되는지 살펴보겠습니다.
사용자가 특정 색상 요소를 절반 정도 보았을 때 로그가 콘솔에 출력되는 것을 확인할 수 있습니다.
그럼 브라우저 크기가 조정되었을 때도 로그가 출력될까요? 🤔
페이지를 스크롤 할 때와 마찬가지로 콜백이 호출됩니다. 빨간색 요소가 절반 이상 보여질 때 한 번, 다시 주황색 요소가 절반 이상 보여질 때 한 번 총 두번이 호출되었군요!
마지막으로 로그를 조금 더 살펴보고 마무리하겠습니다. 🙌
4. isIntersecting
로그를 살펴보면 두개의 요소( IntersectionObserverEntry)를 가진 배열이 있습니다. 이전 요소의 정보와 현재 요소의 정보입니다.
두 요소 모두 isIntersecting 값이 존재합니다. 위 사진에서는 각각 false 및 true 입니다. 이 값을 활용하여 현재 사용자가 보고 있는 색상을 알 수 있죠.
지금까지 Intersection Observer API에 대해서 살펴보았습니다. Intersection Observer API를 활용하여 사용자가 현재 보고있는 요소에 따라 다양한 응용 작업을 할 수 있을 것 같습니다! 😉
위 예시코드는 이곳에서 확인하실 수 있습니다.
감사합니다.
