React에서 Intersection Observer API 사용하기

2021-05-12REACT

Intersection Observer API를 공부하게 된 이유

특정 컴포넌트가 뷰포트의 상단에 도달했을때 애니메이션이 동작하는 기능을 추가하려고 한다. 현재는 APP 컴포넌트가 마운트되자마자 애니메이션이 동작해서 해당 컴포넌트에 도달했을 때 애니메이션의 동작을 확인할 수가 없었다.

const observer = new IntersectionObserver(callbakcFunction, options){
	observer.observe(targetElement)
}

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1
};

root : 루트 요소로 타겟이 보이는지 확인하기 위한 뷰포트를 의미한다. root가 null이거나 특정짓지 않으면 브라우저 뷰포트를 뜻함. 타겟의 부모, 조상이어야 한다.
rootMargin : 루트 요소를 둘러싼 박스에 대한 값으로, CSS의 margin과 유사하다.
threshold : 문지방을 뜻한다. 원하는 요소가 얼마나 노출되었는지를 나타내는 intersection ratio이다. 다시 말해서 타겟요소가 root 요소내에서 얼마나 보여지는지를 나타내는 0 ~ 1의 값으로 타겟 요소가 원하는 만큼 노출될때마다 콜백함수가 호출된다.
- 단일 숫자나 숫자 배열로 값을 설정할 수 있다. 25% 단위로 타겟 요소의 보일때마다 콜백함수를 호출하고 싶다면 threshold :[0,0.25,0.5,0.75,1]로 설정하면 된다.
- 값이 0이면 요소가 1px이라고 보이면 콜백함수를 실행하겠다는 의미고, 값이 1이면 100% 다 보여야 콜백함수를 실행하겠다는 것을 뜻한다.

1. 타겟 요소 지정하기

const containerTarget = useRef(null);

2. IntersectionObserverEntries의 배열을 파라미터로 받는 콜백함수를 선언하기

3. option 객체를 만들기

4. 리액트 훅인 useEffect를 추가해서 콜백함수와 옵션 객체를 사용해서 observer 생성자를 만든다

const observer = new IntersectionObserver(callbackFunction, options);

5. 관찰하고 싶은 타겟 요소에 useRef 변수를 세팅하기.

<div ref={containerTarget} />

처음에 문서를 읽었을때 이해가 되지 않아서 실제로 리액트에서 어떻게 쓰였는지 설명된 블로그 글을 많이 참고했다. 원하는 기능을 구현한 뒤에 다시 문서를 읽으니 처음 읽을 때보다 개념이 덜 낯설게 느껴졌다. 문서를 읽다가 요소가 교차하는지를 감지하기 위해서 브라우저가 메인스레드에서 하던 작업을 이제는 Intersection Observer API를 통해 비동기적으로 처리할 수 있다는 문장을 보았다. 이 부분이 이해가 잘 가질 않아서 메인스레드와 비동기에 관한 글을 읽어본 뒤 그 차이점에 대해 정리를 해보려고 한다.