IntersectionObserver

---

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

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

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

callback

---

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

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

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

IntersectionObserverEntry

---

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

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

교차 여부 (isIntersecting)

---

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

대상 DOM (target)

---

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

교차 비율 (intersectionRatio)

---

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

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

루트 DOM (rootBounds)

---

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

이벤트 발생 시간 (time)

---

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

대상 DOM의 바운더리 (boundingClientRect)

---

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

대상 DOM의 교차 바운더리 (intersectionRect)

---

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

observer

---

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

options

---

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

루트 DOM (root)

---

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

루트 DOM의 margin (rootMargin)

---

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

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

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

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

대상 DOM의 교차 비율 (threshold)

---

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

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

React에서 커스텀 훅으로 간편하게 사용하기

---

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

마치며

---

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

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

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