[angular] ChangeDetectionRef 최적화

26 Dec 2023

angular

ChangeDetectionRef란?

ChangeDetectionRef는 Angular 애플리케이션의 변경 감지 프로세스를 관리하는데 사용되는 클래스입니다. 기본적으로 Angular는 데이터 모델의 변경을 감지하고 이에 따라 화면을 업데이트합니다. 그러나 대규모 애플리케이션의 경우 변경 감지 프로세스가 무거워질 수 있고, 성능에 영향을 줄 수 있습니다. 이때 ChangeDetectionRef를 사용하여 변경 감지를 수동으로 제어하여 성능을 최적화할 수 있습니다.

ChangeDetectionRef를 사용한 성능 최적화 방법

ChangeDetectionRef를 사용하여 애플리케이션의 성능을 최적화하는 주요 방법은 다음과 같습니다.

markForCheck()

markForCheck() 메서드를 사용하면 Angular가 변경을 감지하도록 강제하지만, 현재 컴포넌트부터 그 하위 컴포넌트까지 변경 감지를 실행하지 않습니다. 따라서 특정 컴포넌트의 변경을 외부에 알리지 않고, 자식 컴포넌트의 변경만 감지할 때 사용됩니다.

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

constructor(private cdr: ChangeDetectorRef) {}

updateData() {
  // 데이터 업데이트 후 변경 감지를 수동으로 호출
  this.cdr.markForCheck();
}

detach() / reattach()

detach() 메서드를 사용하면 해당 뷰와 그 하위 뷰들의 변경 감지가 일시적으로 중지됩니다. 이후 reattach() 메서드를 호출하여 다시 변경 감지를 시작할 수 있습니다. 이 방법을 사용하면 특정 시점에 변경 감지 프로세스를 일시적으로 중지시키고, 필요한 시점에 다시 시작시킴으로써 성능을 개선할 수 있습니다.

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

constructor(private cdr: ChangeDetectorRef) {}

disableDetection() {
  this.cdr.detach();
  // 변경 감지가 비활성화된 상태에서 작업 수행
}

enableDetection() {
  this.cdr.reattach();
  // 변경 감지 재활성화
}

결론

ChangeDetectionRef를 사용하여 애플리케이션의 변경 감지 프로세스를 수동으로 제어하여 성능을 최적화할 수 있습니다. markForCheck(), detach(), reattach() 등의 메서드를 적절히 활용하여 애플리케이션의 성능을 향상시킬 수 있습니다.

이상으로 Angular에서 ChangeDetectionRef를 사용한 성능 최적화에 대해 알아보았습니다. 부가적인 정보는 Angular 공식 문서를 참고해 주시기 바랍니다.
Angular 공식 문서

목차

ChangeDetectionRef란?

ChangeDetectionRef를 사용한 성능 최적화 방법

markForCheck()

detach() / reattach()

결론