[angular] 변화 감지 전략

26 Dec 2023

angular

Angular 애플리케이션에서는 사용자의 상호작용에 따라 뷰의 변화를 실시간으로 감지하여 업데이트하는 것이 중요합니다. 이를 효과적으로 처리하기 위해 Angular에서는 변화 감지 전략을 사용합니다. Angular는 기본적으로 Zone.js를 통해 변화를 감지하고 해당 변화에 대한 업데이트를 수행합니다.

변화 감지 전략이란?

변화 감지 전략은 Angular가 어떻게 DOM 변화를 감지하고 해당 변화에 반응하는지에 대한 전략을 말합니다. Angular에서는 기본적으로 두 가지의 변화 감지 전략을 제공합니다.

Default 변화 감지 전략
OnPush 변화 감지 전략

Default 변화 감지 전략

Default 변화 감지 전략은 Angular 애플리케이션의 모든 컴포넌트에 대해 활성화되어 있는 기본적인 전략입니다. 이 전략에서는 컴포넌트 내에서 발생하는 모든 변경 사항에 대해 DOM 갱신을 수행합니다.

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  changeDetection: ChangeDetectionStrategy.Default // Default 변화 감지 전략 사용
})
export class ExampleComponent {
  // ...
}

OnPush 변화 감지 전략

OnPush 변화 감지 전략은 부모 컴포넌트로부터 데이터를 전달받은 경우에만 변화를 감지하고 업데이트를 수행합니다. 즉, @Input 프로퍼티가 변경되거나 수동으로 ChangeDetectorRef.markForCheck()를 호출할 때에만 DOM을 업데이트합니다. 이를 통해 성능을 최적화할 수 있습니다.

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush // OnPush 변화 감지 전략 사용
})
export class ExampleComponent {
  @Input() data: any; // 부모로부터 데이터를 전달받는 프로퍼티

  constructor(private cdr: ChangeDetectorRef) {}

  // 특정 이벤트 발생 시 수동으로 변화 감지를 트리거하는 메서드
  updateData() {
    this.data = // ... // 데이터 업데이트
    this.cdr.markForCheck(); // 수동 변화 감지 트리거
  }
}

변화 감지 전략은 성능 최적화를 위해 중요한 요소이며, 애플리케이션의 크기와 요구되는 업데이트 주기에 따라 적절한 전략을 선택하는 것이 중요합니다.

이상으로 Angular에서의 변화 감지 전략에 대한 내용을 정리해보았습니다. 더 자세한 내용은 Angular 공식 문서를 참고하시기 바랍니다.

참고 자료

Angular 공식 문서 - 변화 감지 전략