ResizeObserver callback에서 width를 매번 1px 키우면 왜 계속 실행되거나 loop error가 날 수 있나요?

callback에서 width += 1px를 실행하면 callback이 만든 DOM write가 다음 레이아웃의 새로운 관찰 입력이 됩니다. 300px에서 시작한 작은 상태는 layout(300) → callback(300) → write(301) → layout(301) → callback(301)로 변하고 안정점이 없습니다. 따라서 callback이 “크기를 읽기만 한다”는 가정이 깨지고, 같은 원인이 계속 새로운 entry를 만듭니다.

Resize Observer는 한 전달 단계에서 관찰을 무한히 재귀 호출하지 않습니다. active observation을 깊이 기준으로 모아 전달하고, 조상·자식 write 때문에 이번 단계에 전달되지 않은 skipped observation이 남으면 resize loop error를 보고할 수 있습니다. 이것을 JavaScript 문법 오류나 네트워크 오류로 해석하면 안 됩니다. 정확히 언제 다음 callback과 paint가 일어나는지는 엔진 scheduling의 target 의존성이므로 콘솔 메시지만으로 특정 frame 수를 단정하지 않습니다.

해결은 disconnect()를 먼저 부르는 것이 아니라 write가 수렴하도록 만드는 것입니다. 폭이 500 미만이면 compact class를 켜고 그 이상이면 끄는 식으로 현재 상태와 목표 상태가 다를 때만 write합니다. 상한·최소 변화량·owner를 두고, 부모와 자식이 서로 폭을 바꾸면 하나의 owner가 크기를 결정합니다. rAF로 write를 옮기면 전달 단계와 render 작업을 분리할 수 있지만 폭이 계속 바뀌는 논리 자체는 사라지지 않습니다. target에서 entry size, callback generation, write 값을 기록해 반복 원인을 확인합니다.