Angular Lifecycle

Angular Lifecycle에 대해 알아보겠습니다.

 

constructor, onInit, onDestroy만 써보고, 나머지는 써보지를 않았습니다. 정확히 Lifecycle를 모르고 마구마구 썼던지라 이번 기회 정리하고자 합니다.

 

Lifecylce은 말 그대로 컴포넌트와 디렉티브들을 생성하고, 소멸하기까지의 과정을 관리합니다. 

Angular는 ng가 붙은 훅(Hook) 메서드를 제공하는데, 메서드를 을 이용하여 생명주기의 각 단계 처리할 내용을 정의할 수 있습니다.

 

Angular의 Lifecycle

Angular는 다음의 순서로 관리를 합니다

Constructor

ngOnChanged

ngOnInit

ngDoCheck

  ngAfterContentInit

  ngAfterContentChecked

  ngAfterViewInit

  ngAfterViewChecked

ngOnDestory

 

* 참고사항 : 컴포넌트와 디렉티브는 동일한 생명주기 Hook 메서드를 사용합니다. 단, 디렉티브는 뷰가 없으므로, ngAfter~ 메서드들은 디렉티브에 존재하지 않습니다.

 

전 기본적으로 Constructor, ngOnInit, ngOnDestory만 사용해왔습니다.

 

constructor와 ngOnInit의 차이는?

constructor가 실행되는 시점에 Angular에서 관리하는 입력 프로퍼티는 초기화되기 이전의 상태

입력 프로퍼티를 참조하는 경우, undefined가 반환되어 의도하지 않은 결과가 발생할 수 있습니다.

ngOnInit은 입력 프로퍼티의 참조가 보장되기 때문에 프로퍼티 초기화와 서버에서 데이터를 조회하여 할당하는 것과 같은 ngOninit에서 수행해주는 것이 좋습니다.

라고는 하는데 확 뭔가 와닿은 부분이 아닙니다. 

 

 

ngOnChanges

 @Input 데코레이터가 적용된 프로퍼티에 바인딩한 값이 초기화 혹은 변경되었을 시에 호출이 됩니다. 

입력 프로퍼티가 변경될 때마다 호출이 됩니다.

simpleChanges 객체를 파라미터로 전달받아서, 프로퍼티의 현재 값과 현재 값을 포함하고 있습니다.

 

ngDoCheck

ngOnInit 이후 컴포넌트 프로퍼티 값 변경, DOM 이벤트, Timer 함수 Tick 이벤트, Ajax 통신과 같은 비동기 처리, 디렉티브 상태 변화가 발생 시 호출이 됩니다.  모든 상태변화가 발생 후 호출되므로 성능영향에 많은 줄 수 있습니다. 

 

ngAfterContentInit, ngAfterContentChecked와 ngAfterViewInit, ngAfterViewChecked

ngAfterContentInit : 디렉티브를 사용하여, 자식 컴포넌트에 부모 컴포넌트의 Templete를 전달 후(content projection) 호출. ngDoCheck 호출 이후에 한 번만 호출되며, 해당 컴포넌트에서만 동작

 

ngAfterContentChecked : ngAfterContentInit 이후 호출

 

ngAfterViewInit : 컴포넌트의 View와 ViewChild가 초기화된 이후 호출. HTML에 작성된 내용이 화면에 모두 출력되고, 호출됨

 

ngAfterViewChecked: ngAfterViewInit 호출 이후 호출되며, View에 대한 변화 감지 (change detection) 이루어질 때 동작한다. 

 

ngOnDestory

컴포넌트와 디렉티브가 소멸되기 이전에 호출. RxJS의 unsubscribe()와 같이 메모리 누수 방지를 정의합니다. (구독 해제)

 

 

부모 컴포넌트에서 자녀 컴포넌트에 접근하려면 어떻게 해야 할까?
Angular에서 VeiwChilen, ContentChildren, QueryList

 

@ViewChileren 데코레이터를 사용한다. @ViewChildren 데코레이터는 파라미터 타입으로 Component/Directive 타입 혹은 템플릿 변수 이름을 지원을 합니다.

 

export class Parent {
  @ViewChildren(ChiledComponent) child : QueryList<ChildComponent>

  ngAfterViewInit() {
      this.child.forEach(value => console.log(value));
  }
}

파라미터가 Component/Directive 일 경우 반환 값도 Component/Directive의 인스턴스가 됩니다.

파라미터가 템플릿 변수 이름인 경우 반환 값은 Native Element에 참조가 됩니다.

 

기본적으로 @ViewChildren 데코레이터는 Component 인스턴스를 반환하지만 다른 토큰을 요청할 수 있습니다.

 

QueryList

@ViewChildren의 반환 타입은 QueryList입니다. 항목 목록을 저장하는 객체의 이름으로 응용프로그램 상태가 변경이 되면 Angular가 자동으로 객체 항목을 업데이트를 한다.

 

QueryList는 Iterable 인터페이스를 구현하므로, ngFor Directive를 사용하여 Angular 템플릿에서 사용할 수 있습니다.