[Angular] Life-cycle

Angular life-cycle timing

 

1. ngOnChanges

"Respond when Angular sets or resets data-bound input properties."

템플릿과 컴포넌트가 데이터 바인딩이 되어 있는 상태일때, 그 데이터가 변경될때 작동한다. (@Input)

 

"This happens frequently, so any operation you perform here impacts performance significantly." ngOnChanges에서 실행되는 코드는 성능에 크게 영향을 주기때문에 주의해야 한다.

"If your component has no inputs or you use it without providing any inputs, the framework will not call"

만약 데이터 바인딩이 안되어있을 경우 ngOnChanges는 반응하지 않을 것이다.

 

2. ngDoCheck

ngOnChanges와 같이 실행시켰을때 ngOnChange가 먼저 실행되고 그 다음에 ngDoCheck가 실행된다. 공식문서는 너무 애매하게 설명하고 있는데, stackoverflow나 구글링을 해서 본 결과

"ngOnChanges is called when a value bound to an input has changed so you can run custom code when an input has changed."

"ngDoCheck is called when change detection runs so you can implement your custom change detection action."

 

ngDoCheck 훅이 조금더 넓은 영역을 커버한다. 즉, input이 변경될때와 change-detection tree에 의해 Angular가 top to bottom을 훑어 보며 변경점을 찾을때 무조건 실행된다는 것이다.

 

3. ngOnInit 

"Perform complex initializations outside of the constructor"

constructor함수 안에서 fetch와 같은 complex한 코드를 넣지 말아라. 대신 OnInit에 넣어라.

"Set up the component after Angular sets the input properties"

실행순서 : constructor → set directive/component input properties(데이터 바인딩) → ngOnInit

ngOnInit은 constructor 함수가 실행되고, @Input등에 의한 데이터바인딩이 일어난 뒤에 실행된다.

 

import { Component, ElementRef, Input, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({})
class ExampleComponent implements OnInit {
  @Input()
  person: Person;

  constructor(
    private router: Router,
    private el: ElementRef
  ) {
    
    console.log(this.person); // undefined
  }

  ngOnInit() {
    this.el.nativeElement.style.display = 'none';
    
    console.log(this.person); // { name: 'Todd Motto', location: 'England, UK' }
  }
}

 

constructor는 ES6의 문법으로, Angular의 기능이 아니라 class의 자체적인 기능이다. 그렇기 때문에 constructor가 호출되는 시점은 Angular의 제어 밖에 있다. 위와 같이 constructor와 ngOnInit에서 console.log로 @Input 데코레이터에 있는 person이라는 변수에 접근했을때 각각 다른 반을을 보이는 것이다.

 

constructor를 호출하는 주체가 Angular가 아닌 자바스크립트 엔진이라는 점이 중요하다. 그런 이유로 ngOnInit(AngularJS에서는 onInit) 생애주기 훅이 만들어졌다.

생애주기 훅을 추가하면서 Angular는 컴포넌트가 생성된 후에 설정을 마무리하기 위한 메소드를 한 차례 실행할 수 있게 되었다.

 

ngAfterContentInit

"Respond after Angular projects external content into the component's view, or into the view that a directive is in."

위 문장을 이해하기에 앞서 ngAfterContentInit에 대해 알아보기 전에 content projection에 대한 개념을 이해해야 한다. (위에 그림 참고)

ngAfterContentInit는 부모 컴포넌트의 템플릿 안에서 선언되어야 하고, HTML태그 사이 또는 컴포넌트 태그 사이에 존재해야 한다. 그리고 자식 컴포넌트는 <ng-content>가 선언되어있어야 한다. (위에 코드 참고)

공식문서에서 설명하듯이, ngAfterContentInit은 project된 컨텐츠(단순 HTML 또는 컴포넌트)의 view가 그려진 뒤 실행된다.

 

 

 

 

ngAfterContentChecked

ngAfterViewInit

ngAfterViewChecked

ngOnDestroy

 

https://youtu.be/FBj9NbufTXI