변경 감지는 Angular의 기본 측면으로, 데이터 수정이나 사용자 상호작용에 따라 변경된 DOM 부분을 식별하고 업데이트하는 역할을 담당합니다. 이 프로세스를 통해 UI가 기본 데이터와 일관되게 유지되어 사용자 경험과 애플리케이션 성능이 향상됩니다.

Zone.js의 역할

역사적으로 Angular는 변경 감지 메커니즘을 Zone.js에 의존해 왔습니다. Zone.js는 비동기 작업을 가로채서 Angular가 변경 사항을 모니터링하고 그에 따라 업데이트를 트리거할 수 있도록 하는 JavaScript 라이브러리입니다. 그러나 Zone.js를 포함하면 특히 비동기 활동이 빈번한 시나리오에서 애플리케이션에 오버헤드가 추가될 수 있습니다.

변경 감지 전략

Angular는 두 가지 주요 변경 감지 전략을 제공합니다.

• 기본값: 변경 감지는 ngOnInit 또는 ngAfterViewInit와 같은 모든 수명 주기 후크 후에 트리거됩니다. 이 전략은 간단하지만 특히 대규모 애플리케이션에서 불필요한 DOM 업데이트로 이어질 수 있습니다.

@Component({
  selector: 'app-my-component',
  template: `
    
{{ message }}
  `
})
export class MyComponent {
  message = 'Hello, world!';
}

Angular는 대부분의 변경 감지 로직을 자동으로 처리하므로 이 전략을 구현하기가 더 쉽습니다.
이 변경 감지 전략의 가장 큰 과제는 대규모 애플리케이션에 매우 중요한 불필요한 DOM 업데이트가 발생한다는 것입니다.

• OnPush: 변경 감지는 입력 속성이나 비동기 관찰 가능 항목이 변경될 때만 트리거됩니다. 이 전략은 데이터가 자주 업데이트되는 복잡한 구성 요소의 경우 더 효율적이지만 수동 관리가 더 많이 필요합니다.

@Component({
  selector: 'app-my-component',
  template: `
    
{{ message }}
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  message = 'Hello, world!';
} 

onPush 변경 감지 전략은 불필요한 DOM 조작을 최소화했지만 onPush 변경 전략의 가장 큰 과제는 개발자가 더 많은 수동 관리를 수행하고 변경 사항을 수동으로 트리거해야 한다는 것입니다. 데이터가 간접적으로 변경되거나 변경 가능한 객체를 사용하는 경우와 같은 특정 시나리오에서는changeDetectorRef.DetectChanges()를 사용하여 변경 감지를 명시적으로 처리해야 했습니다.

Angular 18 및 하이브리드 변경 감지: 영역 없는 접근 방식

Zone.js와 관련된 문제를 해결하기 위해 Angular 18은 하이브리드 변경 감지라는 실험적 기능을 도입했습니다. 이 접근 방식은 변경 사항을 감지하고 DOM을 조작하는 새로운 변경 감지 메커니즘을 사용하여 Zone.js를 완전히 제거하는 것을 목표로 합니다.

하이브리드 변경 감지 활성화:

하이브리드 변경 감지를 활성화하려면 다음 코드를 사용할 수 있습니다.

bootstrapApplication(RootCmp,
{ providers: [provideExperimentalZonelessChangeDetection()] 
}
);

이렇게 하면 다음 시나리오에서 변경 감지가 실행됩니다.

• 신호가 업데이트되었습니다.
• changeDetectorRef.markForCheck()가 호출됩니다.
• AsyncPipe를 구독한 관찰 가능 항목은 새로운 값을 받습니다.
• 구성요소가 연결되거나 분리됩니다.
• 입력이 설정되었습니다.

하이브리드 변경 감지가 활성화되면 애플리케이션의 폴리필에서 Zone.js를 안전하게 제거할 수 있습니다.

 "polyfills": [
              "zone.js" //remove this line
            ],

하이브리드 변경 감지의 이점

• 성능 향상: Zone.js를 제거하면 오버헤드가 줄어들어 특히 비동기 작업이 많은 애플리케이션에서 성능이 향상됩니다.

• 향상된 개발자 환경: 수동 변경 감지 기능이 제거되어 개발이 단순화되고 오류 가능성이 줄어듭니다.

• 더 작은 애플리케이션 크기: Zone.js는 일반적으로 애플리케이션 크기에 약 13KB를 추가합니다. 이를 제거하면 번들이 더 작아질 수 있습니다.