IntersectionObserver는 DOM과 뷰포트를 다루는 데 특화된 옵저버다. DOM이 뷰포트와 교차하는지 여부를 감지하여 DOM이 실제 사용자 화면에 보여지는지, 아니면 숨겨졌는지 구분할 수 있다.

TYPESCRIPT
1
const io = new IntersectionObserver(callback, options);

위 코드로 사용할 수 있으며, callback, options 두 가지 파라미터를 받는다.

IntersectionObserver의 콜백 파라미터는 요소가 뷰포트에 보이거나, 보이지 않을 때 동작하는 이벤트 메서드다.

IntersectionObserverCallback 타입으로 선언되어 있으며, 코드로 표현하면 아래와 같다.

TYPESCRIPT
1
const io = new IntersectionObserver((entries, observer) => {});

entries는 IntersectionObserverEntry[] 타입을 갖는다. IntersectionObserver에 등록된 요소의 이벤트 정보를 배열 형태로 반환한다.

배열 타입인 이유는 IntersectionObserver에 여러 DOM을 등록할 수 있기 때문이다.

isIntersecting 속성은 교차 여부를 boolean 값으로 반환해준다. 지정된 옵션에 따라 DOM에 보여질 경우 true, 아닐 경우 false를 반환한다.

이벤트 속성에서 흔히 보는 target 속성과 동일하게, 이벤트가 발생한 자신을 반환한다.

DOM이 교차된 비율을 number로 반환해준다. 추후 설명할 options에서 지정하는 threshold와 밀접한 연관이 있다.

threshold에 배열을 지정하여 다수의 비율을 지정했을 경우, 이 값을 통해 비율을 특정할 수 있다.

뷰포트의 기준인 DOM을 Element 형태로 반환해준다. options에서 root 속성을 지정하지 않았다면 null을 반환한다.

이벤트가 발생한 시간을 number 값으로 반환해준다.

대상 DOM의 바운더리 정보를 반환해준다. x, y, width, height 정보를 얻을 수 있다.

대상 DOM과 뷰포트의 교차 영역에 대한 바운더리 정보를 반환해준다. boundingClientRect와 마찬가지로 x, y, width, height 정보를 얻을 수 있지만, 뷰포트와 교차된 영역에 한정된다는 차이점이 있다.

IntersectionObserver 객체를 반환해준다. 이를 통해 콜백 메서드 내에서도 IntersectionObserver를 연쇄적으로 다룰 수 있다.

options 속성을 전달하여 IntersectionObserver의 세부 동작을 제어할 수 있다.

뷰포트의 기준이 되는 루트 DOM을 지정할 수 있다. 만약 지정하지 않을 경우 현재 보고있는 브라우저의 뷰포트가 지정된다.

루트 DOM을 기준으로 교차 이벤트가 발생하는데, rootMargin을 통해 감지 영역을 조절할 수 있다.

예를 들면, root가 뷰포트일 때, rootMargin을 100px로 지정하면 뷰포트보다 100px 먼 곳에서부터 교차 이벤트가 발생한다.

이를 통해, 미리 이벤트를 발생시키는 식의 활용이 가능하다.

CSS의 margin 속성과 동일하게 y x 혹은 top right bottom left 방식으로 지정하는 것도 가능하다.

교차 이벤트가 발생하기 위한 교차 비율을 number 혹은 number[]로 지정하며, 요소는 0 ~ 1 사이의 실수를 가진다. 예를들어, 0.2는 교차비율이 20%일 경우 교차 이벤트를 발생시킨다.

배열로 지정할 경우, 지정한 비율마다 이벤트가 발생한다. 즉 [ 0.2, 0.5, 0.8 ]일 경우, 20%, 50%, 80% 교차 시 각각 이벤트가 발생하는 식이다.

IntersectionObserver를 사용하다보면, 적절한 생명주기에 맞춰 DOM을 등록하는 것이 생각보다 번거로움을 알 수 있다.

커스텀 훅을 통해 IntersectionObserver를 더욱 쉽게 사용해보자.

TYPESCRIPT
1
2
3
4
export function useIntersectionObserver(): void
{
  //
}

위와 같이 useIntersectionObserver라는 메서드를 정의해보자.

useIntersectionObserver를 사용하기 위해선 아래와 같은 세 가지 요소가 필요하다.

1. 대상 DOM
2. 콜백 메서드
3. 옵션

위 세 요소를 파라미터로 정의하자. 1번의 경우, 일반적으로 HTMLElement가 필요하지만, 해당 훅에서는 HTMLElement 타입 뿐만 아니라, string을 받아 #id, .class와 같은 선택자로 태그를 활용할 수 있도록 만들 것이다.

TYPESCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { useEffect } from "react";

export type UseIntersectionObserverCallback = (
  entry: IntersectionObserverEntry
) => void;

/**
 * IntersectionObserver 적용 훅 메서드
 *
 * @param {Element | string | null} ref: Element
 * @param {UseIntersectionObserverCallback} callback: 콜백 메서드
 * @param {IntersectionObserverInit} options: 옵션
 */
export function useIntersectionObserver(
  ref: Element | string | null,
  callback: UseIntersectionObserverCallback,
  options?: IntersectionObserverInit
): void
{
  //
}

파라미터의 정의는 위와 같다. 이후 IntersectionObserver을 선언하고 콜백 메서드와 옵션을 할당한다.

TYPESCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { useEffect } from "react";

export type UseIntersectionObserverCallback = (
  entry: IntersectionObserverEntry
) => void;

/**
 * IntersectionObserver 적용 훅 메서드
 *
 * @param {Element | string | null} ref: Element
 * @param {UseIntersectionObserverCallback} callback: 콜백 메서드
 * @param {IntersectionObserverInit} options: 옵션
 */
export function useIntersectionObserver(
  ref: Element | string | null,
  callback: UseIntersectionObserverCallback,
  options?: IntersectionObserverInit
): void
{
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(callback);
    }, options);
  }, [ref, callback, options]);
}

위와 같이 IntersectionObserver을 초기화하여 io 변수로 할당한다.

이후 ref로 지정한 DOM을 할당한다.

ref는 세 가지 상태에 따라 아래와 같은 분기를 거친다.

• null일 경우 -> 패스한다.
• string일 경우 -> document.querySelector 메서드로 태그를 선택한 뒤, 해당 태그를 등록한다.
• HTMLElement일 경우 -> 이미 Element이므로, 즉시 등록한다.

typeof ref === "string" 구문을 통해 ref가 문자열인지를 판별하여 구현했다.

io.observe() 메서드를 통해 태그를 등록할 수 있다.

TYPESCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import { useEffect } from "react";

export type UseIntersectionObserverCallback = (
  entry: IntersectionObserverEntry
) => void;

/**
 * IntersectionObserver 적용 훅 메서드
 *
 * @param {Element | string | null} ref: Element
 * @param {UseIntersectionObserverCallback} callback: 콜백 메서드
 * @param {IntersectionObserverInit} options: 옵션
 */
export function useIntersectionObserver(
  ref: Element | string | null,
  callback: UseIntersectionObserverCallback,
  options?: IntersectionObserverInit
): void
{
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(callback);
    }, options);

    // DOM이 유효할 경우
    if (ref) {
      // ref가 문자열일 경우
      if (typeof ref === "string") {
        const tag = document.querySelector(ref);

        // 태그가 유효할 경우
        if (tag) {
          io.observe(tag);
        }
      }

      // DOM일 경우
      else {
        io.observe(ref);
      }
    }
  }, [ref, callback, options]);
}

마지막으로, 컴포넌트가 렌더링 될 때마다 IntersectionObserver의 등록이 중첩되지 않도록, 초기화 코드를 넣어준다.

io.disconnect() 메서드를 통해 IntersectionObserver를 제거할 수 있다.

TYPESCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import { useEffect } from "react";

export type UseIntersectionObserverCallback = (
  entry: IntersectionObserverEntry
) => void;

/**
 * IntersectionObserver 적용 훅 메서드
 *
 * @param {Element | string | null} ref: Element
 * @param {UseIntersectionObserverCallback} callback: 콜백 메서드
 * @param {IntersectionObserverInit} options: 옵션
 */
export function useIntersectionObserver(
  ref: Element | string | null,
  callback: UseIntersectionObserverCallback,
  options?: IntersectionObserverInit
): void
{
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(callback);
    }, options);

    // DOM이 유효할 경우
    if (ref) {
      // ref가 문자열일 경우
      if (typeof ref === "string") {
        const tag = document.querySelector(ref);

        // 태그가 유효할 경우
        if (tag) {
          io.observe(tag);
        }
      }

      // DOM일 경우
      else {
        io.observe(ref);
      }
    }

    return () => {
      io.disconnect();
    };
  }, [ref, callback, options]);
}

전체 코드는 위와 같다.

CodeSandbox로 간단한 예시를 구현했다. CodeSandbox의 렌더링 방식 때문인지, rootMargin은 제대로 동작하지 않는 듯하다.

이와 같이 IntersectionObserver를 활용하면 DOM의 뷰포트 관련 요소를 쉽게 다룰 수 있다.

이 API는 인피니티 스크롤, 애니매이션 동작 트리거 등, 기존의 Event Driven으로 구현하기 복잡한 기능을 쉽게 개발할 수 있다.

다음 장에선 ResizeObserver에 대해 다뤄보자.