[React] 화면 요소 사이즈 변화를 감지하고 콜백 함수를 실행해주는 ResizeObserver

토이 프로젝트 개발 중에 특정 div의 너비 변화를 감지하고 그때마다 함수를 실행해야하는 상황이었다.

addEventListener('resize', () => {})로 이벤트를 등록해야하는 줄 알았는데 gemini에게 물어보니 또다른 방법이 존재했다.

바로 ResizeObserver라는 객체다.

이 객체는 화면 요소의 사이즈 변화를 감지했을 때 콜벡함수를 자동으로 실행해준다.

리액트 내장 객체인 줄 알았는데, 그게 아니라 import 없이도 사용할 수 있었다.

ResizeObserver사용 방법

사용 방법은 간단하다.

1. 사이즈 변화 요소의 ref를 생성한다.
2. ResizeObserver 인스턴스를 생성하고 콜벡함수를 전달한다.
3. ResizeObserver 인스턴스의 observe() 메서드에 변화 요소 ref.current를 전달한다.
4. 인스턴스의 disconnect()를 실행하여 감지를 해제한다.

실제 코드로 사용법을 확인하면 이해하기 쉽다.

  useEffect(() => {
	
    // resize 이벤트 발생시 실행할 콜백 함수
    const callbackFunc = () => {}
    
    // ResizeObserver 인스턴스 생성 & 콜백 함수 등록
    const observer = new ResizeObserver(() => {
      callbackFunc()
    })
    
    // observer 감지 시작
    observer.observe(scrollAreaRef.current)

    // observer 감지 해제
    return () => observer.disconnect()
  }, [])

다른 페이지로 넘어갔을 때 감지를 멈추기 위해
useEffect()안에서 ResizeObserver를 생성하고 클린업 함수에서 감지 해제 함수를 실행했다.

이렇게 하면 메모리 누수를 막을 수 있다.

적용 예시

Chakra UI로 유튜브 클론 코딩 중, 필터 버튼 리스트를 구현할 때 ResizeObserver를 적용했다.

위 gif에서 스크롤 박스 크기가 일정 크기 이상 줄어들면 화살표 버튼이 표시된다.
물론 크기가 커지면 그 반대로도 작동한다.

이는 스크롤 박스의 크기가 스크롤 width 보다 작아질 경우 버튼을 표시하는 함수를 ResizeObserver에 등록한 것이다.

이렇게 화면 요소의 사이즈 변화를 감지하고 특정 함수를 실행할 때 ResizeObserver를 활용할 수 있다.