Zone.js 제거를 통한 명시적 Change Detection 체계 구축

How Angular Change Detection Works Without ZoneJs?

Andy Tu Hoang2026년 5월 18일10분intermediate

AI 요약

Context

Zone.js 기반의 암시적 Change Detection 방식은 모든 비동기 브라우저 API를 패칭하여 런타임 오버헤드를 발생시킴. 불분명한 업데이트 트리거로 인한 예측 불가능한 UI 렌더링과 성능 저하가 주요 한계점으로 작용함.

NgZone을 NoopNgZone으로 대체하고 ChangeDetectionSchedulerImpl을 통한 명시적 스케줄링 구조 도입
Signal 기반의 Reactive Template Consumer를 활용하여 상태 변경 시 해당 뷰의 조상 노드까지 순회 경로를 마킹하는 최적화 구현
markViewDirty 함수를 통한 Input 설정, Host Listener 실행, markForCheck 호출 등의 이벤트를 통합 알림 체계로 단일화
LViewFlags의 Dirty 및 RefreshView 비트를 활용하여 전체 트리 순회가 아닌 필요한 영역만 선택적으로 갱신하는 효율적 렌더링 수행
상태 관리 모델을 Signal로 전환하여 프레임워크 수준에서 변경 감지 알림을 자동화하는 구조적 개선

실천 포인트

1. 기존 Zone.js 의존 코드를 Zoneless로 전환 전 OnPush 전략을 선제적으로 적용하여 누락된 알림 지점 식별

2. 단순 클래스 멤버 변수 업데이트를 Signal.set() 또는 Signal.update()로 교체하여 자동 알림 체계 구축

3. 외부 라이브러리 콜백 등 프레임워크 외부에서 발생하는 상태 변경 시 ChangeDetectorRef.markForCheck() 호출 여부 검토

태그