Angular 변경 감지 및 변경 감지 전략이란 무엇입니까?

Angular의 가장 큰 강점 중 하나는 애플리케이션의 변경 사항을 쉽게 감지하고 업데이트하는 동시에 업데이트된 상태를 화면에 자동으로 렌더링하는 기능입니다. Angular 변경 감지에 대한 과대 광고, Angular 구성 요소 라이브러리에서 변경 감지의 작동 방식 및 개발자가 일반적으로 구현하는 전략을 더 잘 이해할 수 있도록 몇 가지 Angular 변경 감지 예제를 제공하고 이 문서에서 다음 항목을 다룰 것입니다.

Try Ignite UI for Angular

Angular의 변경 감지란 무엇입니까?

Angular 변경 감지는 앱의 구성 요소에서 데이터가 변경되는 시기를 감지하고 보기를 다시 렌더링하여 업데이트된 값 또는 개체를 최종 사용자에게 즉시 표시하는 메커니즘입니다. 이러한 방식으로 프레임워크는 UI가 소프트웨어의 내부 상태와 동기화되도록 하여 구성 요소와 뷰가 항상 동기화되도록 합니다.

변경은 다양한 경우에 발생하며 다양한 이벤트에서 파생됩니다.

• 네트워크 요청 또는 구성 요소 이벤트에서 수신된 데이터
• 마우스 클릭, 스크롤, 마우스 오버, 키보드 탐색
• AJAX calls
• setTimeOut, SetInterval과 같은 JavaScript 타이머 함수 사용

Angular에서 변경 감지는 어떻게 작동합니까?

기본적으로 Angular는 앞서 언급했듯이 사용자 이벤트 또는 네트워크 요청에서 수신된 데이터와 같은 무언가가 앱의 변경을 트리거할 때마다 Angular Grid +의 다른 모든 구성 요소(위에서 아래로)에 대한 변경 감지를 수행합니다. 변경된 데이터로 DOM을 감지하고 업데이트하기 위해 프레임워크는 각 구성 요소에 자체 변경 감지기를 제공합니다. 변경 감지기는 템플릿의 바인딩을 읽고 업데이트된 데이터를 뷰에 반영하여 데이터 모델과 DOM이 모두 동기화되도록 합니다.

예를 들어 데이터 모델을 각각 업데이트하는 구성 요소 바인딩을 업데이트할 수 있습니다. Angular 변경 감지기는 트리거된 변경을 감지하고 변경 감지를 실행하여 구성 요소 트리의 모든 구성 요소를 위에서 아래로 확인합니다. 이렇게 하면 해당 모델이 변경되었는지 확인합니다. 그리고 새 값이 있는 경우 DOM을 즉시 업데이트합니다.

사용자가 온라인 양식을 작성할 때 주소 변경 버튼을 클릭한다고 상상해 보십시오. 이 작업은 변경 감지 트리의 모든 보기에 대해 변경 감지를 자동으로 트리거합니다. Angular 변경 감지기는 변경 내용을 확인할 모든 보기를 수집하고 처음에 이 변경을 요청한 사용자의 firstname 속성 값을 업데이트합니다.

Angular Change Detection Strategies

개발자로서 우리는 Angular 앱이 완벽하게 작동하고 고성능이며 훌륭한 UX를 제공하기 위해 다양한 요구 사항을 충족해야 한다는 것을 알고 있습니다. 대화형, 반응형, 그리고 무엇보다도 업데이트되도록 구축해야 하며, 이는 내부 모델 상태가 항상 뷰와 동기화되어야 함을 의미합니다. 따라서 성능을 최적화하고 싶을 때마다 Angular에서 변경 감지 전략을 채택하여 데이터가 변경될 때마다 DOM을 업데이트할 수 있습니다.

프레임워크에서 제공하는 두 가지 Angular 변경 감지 전략이 있습니다.

• 기본 전략
• OnPush strategy

Angular 기본 변경 감지 전략

ChangeDetector Angular 기본값으로 설정된 경우 모델 속성의 변경 내용에 대해 구성 요소 트리를 순회하는 변경 감지 Angular 실행하여 DOM을 업데이트합니다. 각 구성 요소에는 응용 프로그램이 시작될 때 생성되는 변경 감지기가 있습니다.

ChangeDetectorRef 클래스는 변경 감지 트리를 조작하는 데 사용할 수 있는 몇 가지 기본 제공 메서드를 제공합니다.

• markForCheck() — 변경 된 구성 요소를 표시하여 업데이트를 다시 확인할 수 있습니다.
• detach() — 변경 감지 트리에서 보기를 제외하므로 보기가 다시 연결될 때까지 검사가 트리거되지 않습니다.
• detectChanges() — 뷰와 해당 하위 구성 요소를 확인합니다.
• checkNoChanges() — 뷰와 그 자식을 확인하고 일부 변경 사항이 감지되면 오류를 발생시킵니다.
• reattach() — 새로운 변경 사항을 감지할 수 있도록 이전에 분리된 뷰를 다시 연결합니다.

Angular OnPush Change Detection Strategy

ChangeDetector Angular onPush로 설정된 경우 새 참조가 구성 요소에 전달될 때만 변경 감지 Angular 실행됩니다. observable이 onPush에 전달되면 DOM Angular 업데이트하려면 ChangeDetector를 수동으로 호출해야 합니다.

@Component({
     selector: 'app-card',
     templateUrl: './card.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     styleUrls: ['./card.component.scss'] 
     })
     export class CardComponent {
             …
        }
}

Benefits of onPush change detection

부모 요소가 @Input() 속성으로 전달되지 않은 값을 업데이트하는 경우 자식 구성 요소에 대한 불필요한 검사가 수행되지 않으므로 구성 요소를 훨씬 빠르게 다시 렌더링할 수 있습니다.

Ignite UI for Angular와 함께 변경 감지 사용

​Ignite UI for Angular를 사용하여 쇼핑할 항목이 포함된 목록을 표시하는 간단한 예제를 만들어 보겠습니다. 쇼핑 목록 구성 요소와 목록에 새 항목을 추가할 수 있는 입력이 있습니다.

import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
})
export class AppComponent {
    items = new BehaviorSubject(['Apples', 'Tomatoes', 'Potatoes']);

     constructor() { }

     addNewItem(item) {
            this.items.next([...this.items, item]);
     }   
}

app.component.ts에서는 몇 가지 기본값과 목록에 새 항목을 추가할 메서드를 사용하여 BehaviorSubject를 선언합니다.

<input #newItem type="text" placeholder="Add new item"> 
<button (click)="addNewItem(newItem.value)">Add Item</button> 
<shopping-items [data]="items"></shopping-items> 

igx-list 구성 요소를 사용하여 항목을 표시하는 하위 구성 요소 shopping-items 구성 요소를 만들 것입니다.

<h5 class="h5">Shopping List</h5>
<igx-list class="list" *ngFor="let item of shoppingItems">
    <igx-list-item class="list-item">
         <span>{{item}}</span>
     </igx-list-item>
</igx-list>

import { ChangeDetectorRef, Component, Input } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
     selector: 'shopping-items',
     templateUrl: './child.component.html',
     styleUrls: ['./child.component.css']
})
export class ShoppingList {
     @Input() data: Observable<any>;
     shoppingItems: string[] = [];
     constructor(private changeDetector: ChangeDetectorRef) { }

     ngOnInit() {
         this.data.subscribe(item => {
             this.shoppingItems = [...this.shoppingItems, ...item];
             this.changeDetector.markForCheck();
         });
     }
}

ChangeDetectorRef 에서 markForCheck() 메서드를 사용하지 않으면 변경 감지 실행 Angular 거부됩니다. 그렇기 때문에 수동으로 수행해야 합니다. 이 방법을 사용하면 특정 입력이 변형될 때 나타나면 변경 감지를 실행하도록 Angular에게 지시합니다.

결론

프로젝트가 클수록 더 많은 속도가 느려질 수 있습니다. Angular 변경 감지는 앱 효율성을 높이는 데 도움이 되는 기술입니다. 따라서 대규모 프로젝트의 경우 성능을 절약하므로 ChangeDetectionStrategy.OnPush를 사용하는 것이 좋습니다.