Colin's Blog
[angular] OnPush 변경 감지 전략

Angular는 변경 감지 전략을 통해 효과적인 성능을 제공합니다. 한 가지 특별한 전략은 OnPush 전략으로, 이를 통해 애플리케이션 성능을 향상시킬 수 있습니다.

변경 감지 전략

변경 감지란 Angular가 컴포넌트의 상태를 모니터하고 상태 변경 시 화면을 갱신하는 것을 말합니다. 기본적으로 Angular는 컴포넌트와 관련된 이벤트나 서비스의 상태 변경을 모니터하여 화면을 갱신합니다.

OnPush 변경 감지 전략

OnPush 전략을 사용하면 Angular는 컴포넌트의 @Input 속성이나 컴포넌트 내부 상태가 변경될 때만 변경 감지를 수행합니다. 컴포넌트가 변화하지 않는 이상, Angular는 변경 감지를 자동으로 수행하지 않습니다.

이 전략을 사용하면 불필요한 변경 감지를 줄여 성능을 향상시킬 수 있습니다. 특히 애플리케이션의 대규모 데이터나 복잡한 화면 상황에서 유용합니다.

OnPush 전략 적용 방법

컴포넌트에 OnPush 전략을 적용하려면 changeDetection 프로퍼티를 사용합니다.

예를 들어, 다음과 같이 changeDetection 프로퍼티를 사용하여 OnPush 전략을 적용할 수 있습니다.

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  // 컴포넌트 코드
}

간단한 설정으로 OnPush 전략을 적용하여 애플리케이션의 성능을 향상시킬 수 있습니다.

결론

OnPush 변경 감지 전략은 Angular 애플리케이션의 성능을 최적화하는 데 도움을 줍니다. 컴포넌트에서 불필요한 변경 감지를 줄이고 성능을 향상시키고자 한다면, OnPush 전략을 고려해보세요.

참고문헌:

© 2018 Colin. All rights reserved.