7관문. Ref-based Effect

관문 7 / 7

ResizeObserver를 useEffect + ref로 결합하여 엘리먼트 크기 변화를 감지하라.

📖 이론 비급

Ref-based Effect: DOM 관측 API와의 결합

ResizeObserver, IntersectionObserver 등은 DOM 노드를 직접 받아야 한다. Effect 내에서 ref.current를 사용할 때 주의할 점이 있다.

cleanup 패턴: cleanup 함수가 실행될 시점에는 ref.current가 이미 null일 수 있다. 따라서 Effect 안에서 const node = ref.current;로 로컬 변수에 캡처한 후 cleanup에서 그 로컬 변수를 사용해야 안전하다.

⚔️ 수련 코드

import { useRef, useEffect, useState } from 'react';

export default function ResizeTracker() {
  const boxRef = useRef(null);
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    // TODO: ResizeObserver를 생성하여 boxRef.current를 관찰하라
    // 크기 변경 시 setSize 호출
    // cleanup에서 observer.disconnect() 호출 (로컬 변수 캡처 패턴 사용)
  }, []);

  return (
    <div>
      <div ref={boxRef} style={{ resize: 'both', overflow: 'auto', border: '1px solid', padding: 16, width: 200, height: 100 }}>
        크기를 조절해보세요
      </div>
      <p>{size.width} × {size.height}</p>
    </div>
  );
}

Open Sandbox