[데브코스 Day 50] 2022.12.23

ResizeObserver

:요소의 크기 변화를 감지하며 크기 변화가 일어날 때 발생할 수 있는 무한 콜백 루프와 순환 종속성을 방지한다.

resize 이벤트와의 차이점은 resize는 브라우저의 크기를 기준으로 하는 반면 ResizeObserver의 경우 브라우저는 물론 특정 요소의 크기 변화를 감지할 수 있다. 

또한 resize의 경우 변경도니 크기를 구하기 위해 getBoundingClintRect()메서드를 사용해야 했지만 ResizeObserver는 변경된 크기를 제공한다.

 

new ResizeObserver로 생성하고 콜백함수로 크기가 변경됐을 때 실행할 함수를 넘겨준다.

 

entry.contentRect

: 요소의 크기, 위치 정보 등을 제공한다.

 

ResizeObserver.observe()

:특정 대상의 변화에 대한 관찰을 시작한다. 

 

ResizeObserver.unobserver()

: 특정 대상에 대한 관찰을 해제한다.

 

ResizeObserver.disconnect()

: 관찰하는 모든 대상에 대한 관찰을 해제한다.

 

e.nativeEvent

리액트에서 이벤트 발생시 이벤트 래퍼로 SyntheticEvent(합성 이벤트) 객체를 전달한다.

이 객체는 래핑된 이벤트 객체이며 preventDefault를 포함하여 브라우저의 기본 이벤트와 동일한 인터페이스를 가지고 있다.

-> 래핑이란 기본 기능을 감싸는 새로운 기능을 만드는 것

그리고 만약 브라우저 기본 이벤트(nativeEvent) 가 필요할 때 접근할 수 있도록 nativeEvent가 부여되어 있다. 

따라서

event.nativeEvent.stopImmediatePropagtion()

이러한 접근이 가능하다.