Skip to content

fix: 할 일 목록 등록으로 발생하는 반복 렌더링 방지 - #234

Open
zzmin0405 wants to merge 1 commit into
openai:mainfrom
zzmin0405:fix/todo-list-render-loop
Open

zzmin0405 wants to merge 1 commit into
openai:mainfrom
zzmin0405:fix/todo-list-render-loop

Conversation

@zzmin0405

Copy link
Copy Markdown

할 일 예제에서 목록 행이 있으면 registerRowRef 등록이 부모 상태 업데이트를 반복하는 문제를 수정합니다. App이 렌더링할 때마다 새로운 콜백을 만들고, TodoListGroup의 effect는 그 콜백을 의존성으로 사용합니다. effect가 다시 행을 등록하면 새로운 rowRefs 객체가 생성되어 같은 과정이 반복됩니다.

registerRowRefuseCallback으로 고정했습니다. 행의 인덱스가 바뀔 때는 기존 effect의 index 의존성으로 다시 등록되므로, 앞에 새 목록을 추가한 뒤 기존 목록을 여는 동작도 유지됩니다.

재현 및 검증

  • 기준: 18cc38e78a968712c357bacdc3c79fead5bfc6b4, Windows, Node.js 22.17.0, pnpm 10.24.0, React 19.1.1.
  • pnpm dev 실행 후 /tests/todo-render.html을 열면 실제 App에 목록 하나를 제공하는 회귀 검사가 실행됩니다. API 호출이나 ChatGPT 호스트는 필요하지 않습니다.
  • 수정 전에는 초기 목록만 렌더링해도 25회를 넘겨 반복되어 검사가 실패합니다. 검사의 Profiler 상한은 무한 루프로 브라우저가 멈추는 것을 방지하기 위한 것입니다.
  • 수정 후에는 일반 모드와 StrictMode 모두 초기 목록 표시와 목록 추가가 각각 2회 렌더링 후 안정화되고, 인덱스가 이동한 기존 목록 열기도 정상 동작합니다. 6개 검사가 통과했습니다.
  • pnpm tsc:apppnpm build -- --target todo 통과. JSX 컴포넌트는 실제 브라우저 실행과 Vite 빌드로 검증했습니다.

기존 Vite·React만 사용하며 별도 테스트 의존성은 추가하지 않았습니다. ChatGPT 내부 통합 테스트를 실행한 것은 아닙니다.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant