[angular] 변경 감지 성능 향상

26 Dec 2023

Angular 프레임워크는 데이터 바인딩과 변경 감지 기능으로 유명합니다. 그러나 많은 데이터나 복잡한 UI가 있는 경우 변경 감지 속도가 느려질 수 있습니다. 이러한 문제를 해결하기 위해 몇 가지 방법으로 변경 감지 성능을 향상시킬 수 있습니다.

1. OnPush 변경 감지 전략 사용

Angular에서 기본적으로 제공하는 변경 감지 전략은 기존 컴포넌트에서의 모든 변경 사항을 검사하는 것입니다. 하지만 OnPush 전략을 사용하면 입력 바인딩이나 Angular 이벤트가 발생할 때만 변경 감지가 수행되므로 성능이 향상됩니다.

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

불필요한 데이터 바인딩은 변경 감지의 주요 원인이 될 수 있습니다. 따라서 단순한 텍스트 출력 등의 경우, 반복적인 데이터 바인딩을 피하고 한 번만 초기화하는 것이 좋습니다.


<p>{{ data }}</p>

순수 파이프는 입력값이 변하지 않으면 다시 계산하지 않습니다. 이를 통해 불필요한 파이프 실행을 피하고 성능을 향상시킬 수 있습니다.

@Pipe({
  name: 'pure',
  pure: true
})

이러한 변경 감지 성능 향상 기술을 사용하여 Angular 애플리케이션의 성능을 최적화할 수 있습니다.