Angular에서 Zoneless 수용: 변화 감지의 새로운 시대

2024년 5월 22일에 출시된 Angular 18은 실험적인 판도를 바꾸는 영역 없는 Angular 애플리케이션을 도입했습니다. 이렇게 하면 Zone.js 종속성이 제거되어 성능이 향상되고 오버헤드가 줄어들며 디버깅이 단순화됩니다. 영역 없는 애플리케이션과 그 장점, 그리고 이 기능을 실험하는 방법을 살펴보겠습니다.

Angular의 변경 감지 이해(Pre-Zoneless)

변경 감지는 DOM을 구성요소 데이터와 동기화된 상태로 유지합니다. 이전에 Angular는 Zone.js에 의존했습니다. 변경 감지는 다음과 같은 방식으로 트리거됩니다.

• 사용자 상호작용: 버튼 클릭, 텍스트 입력
• 비동기 작업: HTTP 요청, setTimeout, setInterval, Promise 해결
• 수동 트리거: ApplicationRef.tick(), ChangeDetectorRef.detectChanges().

Zone.js는 브라우저 API를 패치하여 Angular에 변경 감지를 시작하도록 알립니다. 효과적이긴 하지만 이로 인해 오버헤드가 추가되고 때로는 ExpressionChangedAfterItHasBeenCheckedError.

이 발생했습니다.

변경 감지 예(Pre-Zoneless)

영역 없는 변경 감지 전에는 Zone.js가 UI 업데이트를 관리했습니다. 이 StackBlitz 예는 다음을 보여줍니다.

1. 이벤트 핸들러 속성 업데이트: 버튼을 클릭하면 카운터가 업데이트됩니다. Zone.js는 변경 감지를 가로채고 예약하고 UI를 업데이트합니다.
2. 비동기 속성 업데이트: 간격으로 속성을 업데이트합니다. Zone.js는 비동기 작업을 감지하고 UI를 업데이트합니다.
3. HTTP 데이터(배열): HTTP를 통해 가져온 데이터는 배열에 저장됩니다. Angular의 기본 변경 감지는 뷰를 업데이트합니다. 그러나 ChangeDetectionStrategy.OnPush을 사용하면 참조 변경 또는 변경 감지가 수동으로 트리거되지 않는 한 직접 배열 돌연변이가 뷰를 업데이트하지 않을 수 있습니다.
4. HTTP 데이터(비동기 파이프): AsyncPipe 관찰 가능한 처리를 단순화하고 자동으로 구독하고 변경 사항 감지를 트리거합니다.
5. HTTP 데이터(신호): 각도 신호(최신 기능)는 종속 독자에게 직접 알리고 Zone.js와 독립적으로 업데이트를 간소화합니다.

이 예는 변경 감지에서 Zone.js의 역할을 강조하여 Angular의 향상된 영역 없는 아키텍처의 기반을 마련합니다.

존리스를 선택하는 이유는 무엇인가요?

Zone.js를 제거하면 다음과 같은 상당한 이점을 얻을 수 있습니다.

• 간소한 변경 감지: ExpressionChangedAfterItHasBeenCheckedError 문제 및 영역 관련 복잡성이 줄어듭니다.
• 오버헤드 감소: 프레임워크가 가벼워지고 성능이 향상됩니다.
• 향상된 디버깅: 변경 감지 제어가 향상되고 성능 병목 현상이 더 쉽게 식별됩니다.

영역 없는 Angular 애플리케이션 구성

영역 없는 전환에는 구성 변경이 필요합니다.

1. 영역 없는 변경 감지 활성화: app.config.ts에 다음을 추가합니다.

<code class="language-typescript">providers: [
  provideExperimentalZonelessChangeDetection()
]</code>

provideZoneChangeDetection()이 있으면 제거하세요.

2. Zone.js 가져오기 제거:

• 애플리케이션 파일에서 import '*zone.js';을 삭제하세요.
• angular.json에서 zone.js 배열에서 polyfills를 제거합니다.

<code class="language-json">"polyfills": []</code>

3. Zone.js 제거:

<code class="language-bash">npm uninstall zone.js</code>

Zone.js 없이 변경 감지 테스트

이 예에서는 Zone.js 없이 변경 사항을 감지하는 방법을 보여줍니다.

각 시나리오를 분석해 보겠습니다.

시나리오 1: 이벤트 핸들러 속성 업데이트

예상대로 작동합니다.

시나리오 2: 비동기 속성 업데이트

this.changeDetectorRef.markForCheck(); 필요하거나 신호 사용:

수정된 버전(markForCheck 포함):

수정된 버전(신호 포함):

시나리오 3: HTTP 데이터(어레이)

뷰가 자동으로 업데이트되지 않습니다:

수정된 버전(markForCheck 포함):

async파이프를 사용하는 것이 바람직합니다.

시나리오 4: HTTP 데이터(비동기 파이프)

간단합니다. async 파이프를 사용하세요:

시나리오 5: HTTP 데이터(신호)

toSignal()을 사용하여 관찰 가능 항목을 신호로 변환합니다.

요약:

• 이벤트 핸들러: UI가 원활하게 업데이트됩니다.
• 비동기 작업: markForCheck() 또는 신호가 필요합니다.
• HTTP(Observables): async 파이프를 사용하세요.
• 신호: 신호 변경 시 자동 UI 업데이트

Angular 19 업데이트(2025년 11월 19일)

Angular 19는 영역 없는 애플리케이션 지원을 더욱 개선하여 API를 개선하고 서버 측 렌더링 지원을 추가하고 테스트를 강화했습니다. Angular CLI는 이제 영역 없는 프로젝트 생성을 지원합니다.

<code class="language-typescript">providers: [
  provideExperimentalZonelessChangeDetection()
]</code>

위 내용은 Angular에서 Zoneless 수용: 변화 감지의 새로운 시대의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!