차트가 안 그려질 때, resize 이벤트 대신 ResizeObserver

창은 그대로인데 차트만 찌그러질 때

혼자 플랜씨(plan-c) 금융계산기를 만들면서 이상한 걸 겪었어요. 복리 그래프를 사이드바 옆에 뒀는데, 사이드바를 접었다 펴면 그래프가 원래 폭 그대로 남아서 찌그러지더라고요. 창 크기는 하나도 안 바뀌었는데 말이죠.

혹시 비슷한 경험 있으신가요? window.addEventListener('resize', ...)로 다시 그리기를 걸어놨는데, 정작 필요한 순간엔 안 불리는 상황이요.

resize 이벤트가 놓치는 것

window의 resize 이벤트는 이름 그대로 창 크기가 바뀔 때만 발생해요. 신호가 딱 하나죠. 그런데 실제로 차트 폭이 바뀌는 경우는 훨씬 많아요.

• 사이드바를 접거나 펼칠 때
• 탭을 바꿔 숨어 있던 영역이 나타날 때
• 화면 분할 패널을 드래그로 넓힐 때

이 셋 다 창 크기는 그대로예요. 그래서 테스트해 보면 resize 이벤트는 0번 불려요. 차트는 부모 요소 크기에 맞춰 그려지는데, 정작 부모가 줄었는지 커졌는지는 아무도 안 알려주는 거죠.

window resize는 창 변화만 감지 · ResizeObserver는 요소 크기 변화를 직접 감지

ResizeObserver로 요소를 직접 관찰

ResizeObserver는 특정 요소의 크기 변화를 지켜보는 표준 웹 API예요. 창이 아니라 내가 지정한 요소를 관찰해요.

직접 붙여 보니 코드는 생각보다 짧았어요. 관찰할 요소를 하나 정하고, 크기가 바뀌면 콜백에서 다시 그리면 끝이에요. 콜백 안에서는 entry.contentRect.width 값을 읽어 새 폭으로 차트를 다시 그리면 되고, 관찰을 시작하는 observe()와 컴포넌트가 사라질 때 정리하는 disconnect() 두 줄만 챙기면 돼요.

한 가지 조심할 점은, 드래그로 패널을 천천히 넓히면 콜백이 아주 자주 불린다는 거예요. 돌려 보니 초당 수십 번씩 다시 그려지길래 100ms 정도 디바운스를 걸었어요. 그 뒤로는 부드럽게 따라오더라고요.

요소 지정→크기 변화 감지→디바운스→다시 그리기

정리하며

적용해 봤더니 결국 핵심은 하나였어요. "무엇이 바뀌었는지"를 창이 아니라 요소한테 물어보는 거요.

3단계로 요약하면 이래요. 관찰할 요소를 정하고, 크기 변화 콜백에서 다시 그리고, 정리를 잊지 않기. 창 resize 이벤트에 기대던 코드를 이 방식으로 바꾸는 데 10분도 안 걸렸어요.

혼자 도구를 여러 개 굴리다 보면 이런 작은 렌더링 문제가 은근히 시간을 잡아먹어요. 플랜씨(plan-c) 같은 계산기든 다른 대시보드든, 차트가 컨테이너 안에서 산다면 window resize보다 ResizeObserver가 더 맞는 답일 수 있어요.