Change Detection 중심 Angular 최적화 방법

핵심 내용

• Angular Change Detection의 불필요한 실행 횟수와 실행 시 CPU 사용량을 최적화 대상으로 제시
• Default 전략에서 이벤트 발생 컴포넌트와 무관한 부모·형제 컴포넌트까지 검사되는 동작 설명

구조와 흐름

• ChangeDetectionStrategy.OnPush 적용으로 컴포넌트별 초기 검사와 이벤트 기반 검사 범위 축소
• Angular Zone 밖의 RxJS fromEvent 이벤트 바인딩으로 자동 Change Detection 우회
• Observable과 async pipe의 MarkForCheck에 따른 상위 컴포넌트 검사 전파
• ChangeDetectorRef.detectChanges를 통한 현재 컴포넌트 단위 수동 검사

선택 이유

• OnPush 기반의 불필요한 전역 검사 감소
• 템플릿 값 변경 시 async pipe 또는 수동 detectChanges를 통한 화면 갱신 제어
• 부모 입력값의 strict equality 비교에 따른 자식 검사 조건 활용

주의할 점

• Zone 밖 이벤트 처리 후 상태만 변경하면 템플릿 갱신 미발생
• async pipe 사용 시 현재 컴포넌트뿐 아니라 상위 컴포넌트까지 검사 가능
• 객체·배열 형태 props 전달 시 참조값 변화에 따른 검사 동작 검토 필요