목록ResizeObserver (1)

Lighthouse of FE beginner

ResizeObserver 활용하기

들어가며프론트엔드 작업을 하다보면 동적으로 레이아웃이 변화하는 컴포넌트를 감지해야 할 경우가 있습니다.변화하는 Viewport의 크기는 window 객체에 resize 이벤트를 바인딩해 감지를 할 수 있지만 특정 엘리먼트를 감지하는 것은 window 객체로 할 수 없습니다.이번 포스팅에서는 React 프로젝트에서 특정 엘리먼트의 변화를 감지하는 방법을 알아보겠습니다. ResizeObserverResizeObserver은 JavaScript의 API입니다.내장된 API로써 ResizeObserver 객체(인스턴스)를 생성해 파라미터로 이벤트 핸들러 함수를 넣어주고 해당 객체의 observe 메서드를 활용해 특정 엘리먼트를 감지할 수 있습니다. 예제코드아래 상황은 특정 엘리먼트에 스크롤이 생겼는지 여부를 체..
[WEB] 프론트엔드 2024. 7. 24. 09:32
이전 Prev 1 Next 다음