ResizeObserver

---

ResizeObserver는 요소의 크기 변화를 감지하는 옵저버다. 요소의 width, height가 변할 경우, 이를 감지하여 원하는 동작을 수행할 수 있다.

TYPESCRIPT
1
2
3
const ro = new ResizeObserver(callback);

ro.observe(tag, options);

이전 장의 IntersectionObserver와 다르게 옵션을 API에서 할당하지 않는다. observe 메서드를 통해 요소를 등록할 때, options를 같이 지정할 수 있다.

options

---

요소 등록 시 options를 전달하여 세부 옵션을 조정할 수 있다. ResizeObserverOptions 타입을 가진다.

박스 종류 (box)

---

요소의 종류를 지정한다.

• content-box - CSS에 정의된 컨텐츠 영역의 크기
• border-box - CSS에 정의된 박스 전체 영역의 크기 (margin, padding, border 포함)
• device-pixel-content-box - 기기의 픽셀 단위 기준으로 정의된 컨텐츠 영역의 크기

callback

---

ResizeObserver의 콜백 메서드는 요소의 크기가 변할 경우 동작하는 이벤트 메서드다.

ResizeObserverCallback 타입으로 선언되어 있으며, 이를 코드로 표기하면 아래와 같다.

TYPESCRIPT
1
const ro = new ResizeObserver((entries, observer) => {});

ResizeObserverEntry

---

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

ResizeObserverEntry에 여러 DOM을 등록하여, 여러 객체에 옵저버를 적용할 수 있다.

각 요소의 의미는 위 박스를 기준으로 설명한다.

전체 영역의 크기 정보 (borderBoxSize)

---

CSS에서 컨텐츠의 크기를 구성하는 요소는 여러가지가 있다.

각각 border, padding으로 레이아웃이 구성되며, 내부의 컨텐츠에 따라 크기가 정해진다.

borderBoxSize는 이 모든 요소를 아우르는 박스의 크기를 제공한다. 배열로 이루어져 있으며, 각 아이템은 blockSize, inlineSize를 가진다.

• blockSize - 높이 (height)
• inlineSize - 너비 (width)

순수 컨텐츠 영역의 크기 정보 (contentBoxSize)

---

CSS에서 박스 레이아웃을 구성하는 border, padding을 제외한 순수 컨텐츠의 크기 정보를 반환한다.

borderBoxSize와 마찬가지로 배열로 이루어져 있으며, 각 아이템의 정보 역시 동일하다.

• blockSize - 높이 (height)
• inlineSize - 너비 (width)

기기 픽셀 기준 컨텐츠 영역의 크기 정보 (devicePixelContentBoxSize)

---

기기 픽셀 기준의 컨텐츠 영역 크기 정보를 반환한다.

borderBoxSize와 마찬가지로 배열로 이루어져 있으며, 각 아이템의 정보 역시 동일하다.

• blockSize - 높이 (height)
• inlineSize - 너비 (width)

요소의 크기 정보 (contentRect)

---

요소들의 다양한 크기 정보를 반환하는 객체로, 다른 객체에서 제공하는 정보가 일부 중복되어 있다.

해당 객체는 레거시 속성으로, 호환성 유지로 인해 지원되고 있으며, 언젠가 지원 종료될 가능성이 있다. 🔗 (참고)

• width - 순수 컨텐츠 영역의 너비 (contentBoxSize와 동일)
• height - 순수 컨텐츠 영역의 높이 (contentBoxSize와 동일)
• x - 박스를 기준으로 위치한 컨텐츠의 x 좌표
• y - 박스를 기준으로 위치한 컨텐츠의 y 좌표
• left - 컨텐츠의 좌측 기준 위치. 통상 x와 동일
• top - 컨텐츠의 상단 기준 위치. 통상 y와 동일
• right - 컨텐츠 우측 기준 위치.
• bottom - 컨텐츠 하단 기준 위치.

이벤트 대상 (target)

---

ResizeObserver 이벤트를 발생시킨 DOM 객체를 반환한다.

observer

---

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

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

---

ResizeObserver를 커스텀 훅을 통해 간편하게 사용해보자.

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

위와 같이 useResizeObserver 메서드를 정의한다.

useResizeObserver를 사용하기 위해선 아래의 세 요소가 필요하다.

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
import { useEffect } from "react";

export type UseResizeObserverCallback = (entry: ResizeObserverEntry) => void;

/**
 * ResizeObserver 적용 훅 메서드
 *
 * @param {Element | string | null} ref: Element
 * @param {UseResizeObserverCallback} callback: 콜백 메서드
 * @param {ResizeObserverOptions} options: 옵션
 */
export function useResizeObserver(ref: Element | string | null, callback: UseResizeObserverCallback, options?: ResizeObserverOptions): void
{
	//
}

파라미터는 위와 같다. 이후 ResizeObserver를 선언하고 콜백 메서드를 할당한다.

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 UseResizeObserverCallback = (entry: ResizeObserverEntry) => void;

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

ResizeObserver를 초기화하여 ro 변수로 할당한다.

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

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

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

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

ro.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 UseResizeObserverCallback = (entry: ResizeObserverEntry) => void;

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

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

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

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

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

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

전체 코드

---

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
48
import { useEffect } from "react";

export type UseResizeObserverCallback = (entry: ResizeObserverEntry) => void;

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

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

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

			// DOM일 경우
			else
			{
				ro.observe(ref, options);
			}
		}

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

전체 코드는 위와 같다.

CodeSandbox를 통한 예시

---

CodeSandbox로 간단한 예시를 구현했다.

마치며

---

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

해당 API는 resize 이벤트를 대체하여 좀 더 효율적인 이벤트 동작을 구현할 수 있다.

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