[React] ResizeObserver로 이미지 주석 입력창의 위치 오류 해결하기

1. 문제 상황 및 원인 분석

이미지 기반 주석 입력창의 위치를 잡기 위해 paperRef의 clientWidth/Height를 참조했으나, 렌더링 시점 차이 및 DOM 변경에 따른 미세한 오차로 인해 입력창이 중앙에서 어긋나는 문제가 발생했다.

2. 시행착오 및 중간 시도들

• style 안에서 직접 clientWidth 계산식 사용
• 초기 useEffect 내에서 수동 측정
• 결과적으로 ResizeObserver 도입

3. 이전 코드

style={{
  width: paperRef?.current?.clientWidth
    ? paperRef.current.clientWidth + 8 + 'px'
    : undefined,
  height: paperRef?.current?.clientHeight
    ? paperRef.current.clientHeight + 8 + 'px'
    : undefined,
}}

4. 개선 후 코드

const [size, setSize] = useState({ width: 0, height: 0 });

useEffect(() => {
  const el = paperRef.current;
  if (!el) return;

  const resizeObserver = new ResizeObserver(() => {
    setSize({
      width: el.clientWidth + 8,
      height: el.clientHeight + 8,
    });
  });

  resizeObserver.observe(el);
  return () => resizeObserver.disconnect();
}, []);

...

style={{
  width: `${size.width}px`,
  height: `${size.height}px`,
}}

5. 정리 및 교훈

• DOM 크기는 언제든 변할 수 있으므로 실시간 추적이 필요
• ResizeObserver는 이미지, PDF, canvas 등 변동 요소에 적합
• 복잡한 계산은 style 안에서 하지 말고 변수나 상태로 분리