ResizeObserver 활용하기

들어가며

프론트엔드 작업을 하다보면 동적으로 레이아웃이 변화하는 컴포넌트를 감지해야 할 경우가 있습니다.

변화하는 Viewport의 크기는 window 객체에 resize 이벤트를 바인딩해 감지를 할 수 있지만 특정 엘리먼트를 감지하는 것은 window 객체로 할 수 없습니다.

이번 포스팅에서는 React 프로젝트에서 특정 엘리먼트의 변화를 감지하는 방법을 알아보겠습니다.

 

ResizeObserver

ResizeObserver은 JavaScript의 API입니다.

내장된 API로써 ResizeObserver 객체(인스턴스)를 생성해 파라미터로 이벤트 핸들러 함수를 넣어주고 해당 객체의 observe 메서드를 활용해 특정 엘리먼트를 감지할 수 있습니다.

 

예제코드

아래 상황은 특정 엘리먼트에 스크롤이 생겼는지 여부를 체크하기 위해 요소를 감지하고 있습니다.

React는 개발자가 DOM을 직접 다루지 않기 때문에 DOM요소를 핸들링 하기 위해 reference를 사용합니다.

import { useRef } from 'react';

const Sample = () => {
  const ref = useRef<HTMLDivElement | null>(null);
  return <div ref={ref}/>
}

 

ref를 바인딩 했다면 useEffect 훅을 사용해 컴포넌트가 마운트 되는 시점에 해당 ref를 감지하는 코드를 작성해보도록 하겠습니다.

import { useEffect, useRef } from 'react';

const Sample = () => {
   const ref = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
      const element = ref.current;
      if (!element) return;

      const eventHandler = () => {
         // 변화가 감지된 시점에 작동할 핸들러 함수 로직 작성
         const { width, height } = element.getBoundingClientRect();
         console.log(width, height);
      };

      const resizeObserver = new ResizeObserver(eventHandler);
      resizeObserver.observe(element);

      return () => resizeObserver.disconnect();
   }, []);
   return <div ref={ref} />;
};

 

useEffect 내부의 로직을 살펴봅시다.

 

먼저 ref객체에서 current 프로퍼티에 접근해 변수로 선언하고, 해당 변수가 null일 경우 return합니다.

useEffect의 생명주기 상 컴포넌트가 최초 랜더링 된 직후 발동되기 때문에 (의존성 배열에 아무 값도 넣어주지 않았습니다.) 해당 엘리먼트는 null일 수 없습니다.

이벤트 핸들러 함수를 작성해주고 크기가 변화했을 경우 작동시킬 로직을 작성해줍니다.

위 로직에서는 간단하게 변화한 엘리먼트의 width와 height값을 콘솔에 찍어봅니다.

그리고 ResizeObserver 객체를 생성한 후 해당 객체를 통해 엘리먼트를 감시합니다.

마지막으로 메모리 누수의 방지를 위해 컴포넌트가 언마운트 됐을 시 감시중인 resizeObserver가 감시를 그만두도록 cleanup 함수에서 resizeObserver 객체를 disconnect 시켜줍니다.

 

마치며

정말 간단하게 특정 엘리먼트의 변화를 감지할 수 있습니다!

프론트엔드에서 빈번하게 발생하는 작업입니다. ResizeObserver객체를 활용한다면 정말 쉽게 엘리먼트를 다룰 수 있는 것 같습니다.

ResizeObserver API에 대한 자세한 내용은 MDN을 살펴보시면 좋을 것 같습니다.

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver