88

최근 30분간 동시 방문자 수를 표시합니다. (~)

최고 동시 방문자 수 -
어제: 0명 / 오늘: 0명

JS Resize Observer, 요소의 크기 변화 관찰

JS Resize Observer, 요소의 크기 변화 관찰

# 개요

Resize Observer는 대상 요소의 크기 변화를 관찰하고 콜백을 실행하는 API입니다.
크기 변화를 제어할 경우 발생할 수 있는 무한 콜백 루프나 순환 종속성(Circular dependency) 등의 다양한 문제 없이 사용할 수 있습니다.

new ResizeObserver를 통해 생성한 인스턴스(ro)로 관찰자(Observer)를 초기화하고 관찰할 대상(Element)을 지정합니다.
생성자는 1개의 인수(callback)를 가집니다.

JS
content_copy
L
L
L
L
L
1
2
3
4
5
// 관찰자 초기화 const ro = new ResizeObserver(callback) // 관찰할 대상(요소) 등록 ro.observe(element)

# 콜백

관찰할 대상이 등록되거나 크기 변화가 생기면 관찰자는 콜백을 실행합니다.
콜백은 2개의 인수(entries, observer)를 가집니다.

JS
content_copy
L
L
1
2
const ro = new ResizeObserver((entries, observer) => {}) ro.observe(element)

# entries

entries는 ResizeObserverEntry 인스턴스의 배열로, .observe() 메소드로 관찰하는 대상들을 의미합니다.
ResizeObserverEntry는 다음 속성들을 포함합니다.

  • contentRect(legacy): 관찰 대상의 사각형 정보(DOMRectReadOnly)
  • target(legacy): 관찰 대상 요소(Element)
  • contentBoxSize: 관찰 대상의 content-box(content) 크기
  • borderBoxSize: 관찰 대상의 border-box(content + padding + border) 크기
JS
content_copy
L
L
L
L
L
L
L
L
L
1
2
3
4
5
6
7
8
9
const ro = new ResizeObserver((entries, observer) => { entries.forEach(entry => { console.log(entry) }) }) ro.observe(element1) ro.observe(element2) // ...

ResizeObserverEntry 구조 zoom_out_map
ResizeObserverEntry 구조

# observer

콜백이 실행되는 해당 인스턴스를 참조합니다.

resize observer entry object zoom_out_map
resize observer entry object

# 메소드

# observe

대상 요소의 관찰을 시작합니다.

JS
content_copy
L
L
L
L
L
L
L
L
L
L
1
2
3
4
5
6
7
8
9
10
const ro1 = new ResizeObserver(callback1) const ro2 = new ResizeObserver(callback2) const div = document.querySelector('div') const button = document.querySelector('button') const textarea = document.querySelector('textarea') ro1.observe(div) // DIV 요소 관찰 ro2.observe(button) // BUTTON 요소 관찰 ro2.observe(textarea) // TEXTAREA 요소 관찰

# unobserve

대상 요소의 관찰을 중지합니다.

JS
content_copy
L
L
L
L
L
L
L
L
L
L
L
1
2
3
4
5
6
7
8
9
10
11
const ro1 = new ResizeObserver(callback1) const ro2 = new ResizeObserver(callback2) // ... ro1.observe(div) ro2.observe(button) ro2.observe(textarea) ro1.unobserve(button) // Nothing.. ro2.unobserve(button) // BUTTON 요소 관찰 중지

# disconnect

ResizeObserver 인스턴스가 관찰하는 모든 요소의 관찰을 중지합니다.

JS
content_copy
L
L
L
L
L
L
L
L
L
L
1
2
3
4
5
6
7
8
9
10
const ro1 = new ResizeObserver(callback1) const ro2 = new ResizeObserver(callback2) // ... ro1.observe(div) ro2.observe(button) ro2.observe(textarea) ro2.disconnect() // `ro2`가 관찰하는 모든 요소(BUTTON, TEXTAREA) 관찰 중지

# 예제

Buy Me A Coffee