피드로 돌아가기
Dev.toFrontend
원문 읽기
Zone.js의 전역 렌더링 부하를 Signal 기반 Fine-grained Reactivity로 해결
Angular Change Detection Explained: Zone.js, OnPush, and the Signal Revolution
AI 요약
Context
Zone.js의 Monkey-patching 방식에 의존한 Default 전략으로 인한 전역 컴포넌트 트리 탐색 부하 발생. 앱 규모 확장 시 단일 비동기 이벤트가 불필요한 전체 Re-render를 유발하는 성능 병목 지점 형성.
Technical Solution
- Zone.js 기반의 암묵적 변경 감지에서 Signal 중심의 명시적 상태 관리 체계로 전환
- ChangeDetectionStrategy.OnPush 도입을 통한 Input 참조 값 변경 및 Async Pipe 기반의 선택적 렌더링 구현
- Immutability 원칙 적용으로 Reference Equality 체크를 통한 불필요한 하위 트리 탐색 차단
- markForCheck()를 활용한 비동기 콜백 외부 상태 변경 시의 명시적 렌더링 트리거 설계
- provideExperimentalZonelessChangeDetection 도입을 통한 Zone.js 의존성 제거 및 Signal Dependency Graph 기반의 정밀 렌더링 구현
실천 포인트
- 대규모 컴포넌트 트리 설계 시 ChangeDetectionStrategy.OnPush 기본 적용 검토 - 객체 상태 업데이트 시 Mutation 대신 Spread Operator를 통한 신규 참조 생성 및 Immutability 유지 - 비동기 데이터 스트림 처리 시 Manual Subscribe 대신 Async Pipe 활용으로 메모리 누수 방지 및 렌더링 최적화 - 단순 UI 업데이트와 무관한 Background Task는 NgZone.runOutsideAngular를 통해 렌더링 사이클에서 분리