Angular Change Detection Strategy / 앵귤러 변경 감지 전략

Angular에서 변경 감지 전략(Change Detection Strategy)은 컴포넌트의 변경을 감지하고 뷰를 업데이트하는 방식을 제어하는 메커니즘입니다. 변경 감지는 컴포넌트의 프로퍼티 또는 이벤트를 통해 발생하는 데이터 변경을 추적하고, 변경이 감지되면 뷰를 업데이트합니다. Angular에서는 기본적으로 `Default` 전략을 사용하며, `OnPush` 전략을 선택적으로 사용할 수 있습니다.

1. Default 변경 감지 전략:
- 기본적으로 Angular에서 사용하는 변경 감지 전략입니다.
- Angular는 모든 컴포넌트의 변경을 추적하고, 각 변경마다 관련된 뷰를 업데이트합니다.
- 변경 감지 주기는 컴포넌트 이벤트, 타이머, HTTP 요청 등과 같은 여러 이벤트에 의해 트리거됩니다.

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

@Component({
  // 컴포넌트 설정
})
export class DefaultStrategyComponent {
  // 프로퍼티
  public data: any;

  // 이벤트 핸들러
  public updateData() {
    this.data = 'Updated Data';
  }
}

2. OnPush 변경 감지 전략:
- `OnPush` 전략은 부모 컴포넌트로부터 `Input`으로 받은 데이터가 변경될 때만 컴포넌트의 변경 감지 주기가 실행됩니다.
- 부모 컴포넌트로부터 전달된 데이터가 변경되지 않는 한, 컴포넌트의 변경은 감지되지 않습니다.
- `@Input()` 데코레이터를 사용하여 입력 프로퍼티를 정의하고, `ChangeDetectionStrategy.OnPush`를 컴포넌트 데코레이터에 추가합니다.

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

@Component({
  // 컴포넌트 설정
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushStrategyComponent {
  @Input() public data: any;

  // 이벤트 핸들러
  public updateData() {
    // OnPush 전략에서는 입력 프로퍼티가 변경되지 않는 한 변경 감지 주기가 실행되지 않으므로,
    // 이벤트 핸들러에서 입력 프로퍼티를 업데이트하는 경우에는 명시적으로 새로운 객체를 생성해야 합니다.
    this.data = { ...this.data, updated: true };
  }
}

OnPush 전략을 사용하면 변경 감지 주기가 더 적게 실행되므로 성능 개선에 도움이 됩니다. 그러나 주의해야

 할 점은 OnPush 전략을 사용할 때 컴포넌트의 변경 감지 로직을 명확하게 이해하고 관리해야 한다는 것입니다. 입력 프로퍼티가 참조 타입인 경우에는 새로운 객체를 할당하여 변경을 감지할 수 있도록 해야 합니다.