Angular 변경감지전략

Angular는 두 가지 변경 감지 전략을 제공합니다: Default와 OnPush.

1. Default: Angular의 기본 변경 감지 전략입니다. 컴포넌트나 그 하위 컴포넌트에서 발생하는 모든 변화(이벤트, HTTP 응답 등)에 대해 Angular가 자동으로 템플릿을 업데이트 합니다.

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<p>{{counter}}</p><button (click)="increment()">Increment</button>`,
})
export class ExampleComponent {
  counter = 0;

  increment() {
    this.counter++;
    // 이 시점에서 Angular는 데이터 바인딩된 `counter` 값이 변경되었음을 알아채고 화면에 반영합니다.
   }
}

2. OnPush: 이전보다 성능 최적화를 위한 방법으로, 현재 컴포넌트의 입력 속성(@Input) 중 하나가 참조 비교로 확인될 때만 View를 업데이트 합니다. 즉, 새 객체가 할당되거나 배열이 수정될 경우에만 작동하며 기존 객체/배열 내부 프로퍼티의 변화는 인식하지 못합니다.

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
selector: 'app-child',
templateUrl:'./child.component.html', 
changeDetection : ChangeDetectionStrategy.OnPush,
})

export class ChildComponent{
@Input() data : any;
}

위 코드에서 ChildComponent은 부모로부터 @Input 프로터리인 data를 받습니다. 여기서 Onpush전략은 부모component 에서 넘어오는 @input값(data) 가 바뀔경우에만 view 를 update 해줍니다.

참고: 양방항 데이터 바인딩([(ngModel)])과 같은 디렉тив들도 동일하게 동작하여 해당 변수 값이 달라질 때마다 DOM 요소 값을 다시 그립니다.

Angular 애플리케이션 성능 최적화 관점에서 보았을 때 "OnPush" 전략 사용하는 것은 좋습니다 . 왜냐하면 필요할 때만 DOM 업데이팅하기 때문입니다.
그러나 "OnPush" 사용시 주의사항도 있으니 잘 고려해서 사용해야 합니다.