03 라이프사이클 후크(Lifecycle hooks) 07

AfterView

AfterView 샘플은 컴포넌트의 자식 뷰를 만든 후 Angular 가 호출하는 AfterViewInit() 및 AfterViewChecked() 후크를 탐색합니다.

다음은 <input>에 영웅의 이름을 표시하는 자식뷰 입니다.

ChildComponent

@Component({   selector: 'my-child-view',   template: '<input [(ngModel)]="hero">' }) export class ChildViewComponent {   hero = 'Magneta'; }

AfterViewComponent는 템플릿 내에 이 자식 뷰를 표시합니다.

AfterViewComponent (template)

template: `   <div>-- child view begins --</div>     <my-child-view></my-child-view>   <div>-- child view ends --</div>`

다음 후크는 @ViewChild로 장식 된 프로퍼티를 통해 하위 뷰를 쿼리해야만 도달 할 수있는 하위 뷰 내에서 변경되는 값을 기반으로 작업을 수행합니다.

AfterViewComponent (class excerpts)

export class AfterViewComponent implements  AfterViewChecked, AfterViewInit {   private prevHero = '';     // Query for a VIEW child of type `ChildViewComponent`   @ViewChild(ChildViewComponent) viewChild: ChildViewComponent;     ngAfterViewInit() {     // viewChild is set after the view has been initialized     this.logIt('AfterViewInit');     this.doSomething();   }     ngAfterViewChecked() {     // viewChild is updated after the view has been checked     if (this.prevHero === this.viewChild.hero) {       this.logIt('AfterViewChecked (no change)');     } else {       this.prevHero = this.viewChild.hero;       this.logIt('AfterViewChecked');       this.doSomething();     }   }   // ... }

 

단방향 데이터 흐름 규칙 준수

영웅 이름이 10자를 초과하면 doSomething() 메서드가 화면을 업데이트합니다.

AfterViewComponent (doSomething)

// This surrogate for real business logic sets the `comment` private doSomething() {   let c = this.viewChild.hero.length > 10 ? `That's a long name` : '';   if (c !== this.comment) {     // Wait a tick because the component's view has already been checked     this.logger.tick_then(() => this.comment = c);   } }

왜 doSomething ()메서드는 comment를 업데이트하기 전에 틱(tick)을 기다릴까요?

Angular의 단방향 데이터 흐름 규칙은 뷰가 구성된 다음, 뷰에 대한 업데이트를 금지합니다. 이러한 훅은, 컴퍼넌트의 뷰가 작성된 후에 시작됩니다.

Angular는 후크가 컴포넌트의 데이터 바인딩된 comment 프로퍼티를 즉시 업데이트하는 경우 오류를 발생시킵니다 (시도해 보십시오!). LoggerService.tick_then()는 브라우저의 JavaScript 순환에서 한 번만 로그 업데이트를 지연시킵니다.

AfterView의 실제 사례는 다음과 같습니다.

Angular는 AfterViewChecked()를 자주 호출합니다. 변경에 관심이 없을 때 더 그렇습니다. 성능 문제를 피하려면 빈약한 후크 메소드를 작성하십시오.