ResizeObserver에 대해 알아봅시다 👋🏼

Resize Observer API는 요소의 크기가 변경될 때 알림을 받을 수 있는 또 다른 훌륭한 JavaScript API입니다. window.onresize 요소 수준에서 생각하십시오.

무엇

요소의 크기가 변경될 수 있는 가장 일반적인 경우는 뷰포트의 크기가 조정되는 경우입니다. 또는 모바일 장치 측면에서 방향이 변경됩니다.
ResizeObserver 이전에는 window.onresize에 연결하거나 window.resize를 사용해야 요소의 크기가 변경되었는지 여부를 파악할 수 있습니다. 이것은 너무 많은 이벤트를 트리거하기 때문에 매우 비효율적이었습니다.

이 API가 유용할 수 있는 또 다른 시나리오는 요소를 동적으로 추가/제거하는 경우입니다. 이 경우 뷰포트가 아닌 상위 크기가 변경됩니다.

The ResizeObserver interface reports changes to the dimensions of an Element's content or border box, or the bounding box of an SVGElement.

콘텐츠 상자는 콘텐츠를 배치할 수 있는 상자로, 패딩과 테두리 너비를 뺀 테두리 상자를 의미합니다. 테두리 상자는 콘텐츠, 패딩 및 테두리를 포함합니다.

말은 그만하고 코드를 보여주세요 😉

가장 간단한 형태로 API의 새 인스턴스를 인스턴스화하고 여기에 콜백을 전달하여 ResizeObserver를 사용할 수 있습니다.

const myObserver = new ResizeObserver(entries => {
  // iterate over the entries, do something.
});

그 자체로는 별로 도움이 되지 않지만 인스턴스에서 observe 메서드를 호출하고 요소를 제공하면 크기 변경 사항을 캡처하기 시작하고 콜백 함수를 호출합니다.

const myEl = document.querySelector('.my-element');

myObserver.observe(myEl);

이제 내 요소의 크기가 변경될 때마다 콜백과 짜잔을 트리거합니다.

콜백 입력 객체

API 생성자에 콜백을 전달하면 아래와 같은 객체 배열을 얻게 됩니다.



보시다시피 얻은 개체에는 contentRect 및 target 의 두 가지 속성이 있습니다. 대상은 분명합니다. DOM 요소 자체입니다. width 의 height 및 contentRect 값은 요소의 getBoundingClientRect 와 달리 패딩을 포함하지 않습니다.

데모

요소의 크기에 따라 글꼴 크기를 변경하는 것부터 크기가 변경될 때 스타일을 변경하는 것까지 이 API로 많은 작업을 수행할 수 있습니다. 아래는 요소의 크기에 따라 경계 라디오를 변경하는 곳입니다. 창 크기를 조정하고 무슨 일이 일어나는지 확인하세요 😎.

데모 설명

데모는 그렇게 복잡하지 않습니다. div에는 두 개의 하위 항목이 있습니다.

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
</div>

변경 사항을 볼 수 있도록 약간의 스타일을 추가합니다.

.boxes {
  display: flex;
  flex-wrap: wrap;
  width: 40vw;
  margin-bottom: 50px;
}
.box {
  height: 200px;
  flex-shrink: 1;
  flex-grow: 1;
  margin: 10px;
  box-sizing: border-box;
  border: 3px solid black;
}

완료되면 관찰자가 변경 사항을 알리도록 작은 스니펫을 추가합니다.

const ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    entry.target.style.borderRadius =
      Math.max(0, 250 - entry.contentRect.width) +
      'px'
  }
})
console.log('horay');
// Only observe the 2nd box
ro.observe(
  document.querySelector('.box:nth-child(2)')
)

콜백에서 우리는 단순히 요소의 폭에 따라 경계 라디오를 변경합니다.

브라우저 지원

Browser support은 대부분의 주요 브라우저에 존재하며 API를 지원하는 Chrome 64+, Firefox 69+, Microsoft Edge 76 및 Safari 13-TP가 있지만 모바일 브라우저에 대한 지원이 부족합니다.

API를 재미있게 탐색하고 API로 멋진 일을 해보세요 😍.