Angular 생명주기(Lifecycle)와 훅(Hook) 메소드

1. 생명주기

 

Angular의 컴포넌트와 디렉티브는 생명주기(Lifecycle)를 갖는데, 생명주기는 Angular가 컴포넌트와 디렉티브를 생성하여 소멸하기까지의 과정을 관리하는 것을 의미합니다. 이와 관련하여 생명주기 이름 앞에 ng가 붙은 훅(Hook) 메소드를 제공하는데 이를 구현하여 생명주기의 각 단계에서 처리해야하는 내용을 정의할 수 있습니다.

 

Angular는 다음의 순서대로 생명주기를 관리합니다.

※ 디렉티브 생명주기 훅 메소드
디렉티브도 컴포넌트와 동일한 생명주기 훅 메소드를 사용합니다. 하지만 디렉티브에는 뷰가 없기 때문에 뷰와 관련된 생명주기인 ngAfterViewInit, ngAfterViewChecked, ngAfterContentInit, ngAfterContentChecked 메소드는 디렉티브에 존재하지 않습니다.

 

2. 생명주기 훅 메소드

 

생명주기 훅(Hook) 메소드는 인터페이스의 형태로 제공됩니다. 모든 생명주기 훅 메소드를 구현할 필요는 없으며, 특정 생명주기에 대해 구현해야할 기능이 있을 때 필요한 해당 훅 메소드를 구현하면 됩니다. 각각의 생명주기 훅 메소드에 대해 알아보겠습니다.

• ngOnChanges

부모 컴포넌트에서 자식 컴포넌트의 입력 프로퍼티(@Input 데코레이터가 적용된 프로퍼티)에 바인딩한 값이 초기화 또는 변경되었을 때 호출됩니다. ngOnInit 호출 이전에 최소 1회 호출되며 이후 입력 프로퍼티가 변경될 때마다 호출됩니다. ngOnChanges 메소드는 입력 프로퍼티의 정보를 담고 있는 SimpleChanges 객체를 파라미터로 전달 받을 수 있습니다. 이 객체는 입력 프로퍼티의 현재값(currentValue)과 이전값(previousValue)을 포함하고 있습니다.

• ngOnInit

ngOnChanges 메소드 동작 이후 입력 프로퍼티를 포함한 모든 프로퍼티의 초기화가 완료된 시점에 한 번만 호출됩니다. 일반적으로 프로퍼티의 초기화는 TypeScript에서는 constructor에서 하는 것이 일반적이지만 Angular에서는 ngOnInit에서 수행하는 것이 좋습니다. 

※ constructor와 ngOnInit에서의 프로퍼티 초기화
TypeScript의 constructor가 실행되는 시점에 Angular에서 관리하는 입력 프로퍼티는 초기화되기 이전의 상태입니다. 따라서 이 시점에 입력 프로퍼티를 참조할 경우 undefined가 반환되어 의도하지 않은 결과가 발생할 수 있습니다. 
ngOnInit은 입력 프로퍼티의 참조가 보장되기 때문에 프로퍼티 초기화와 서버에서 데이터를 조회하여 할당하는 것과 같은 동작은 ngOnInit에서 수행해주는 것이 좋습니다.

• ngDoCheck

ngOnInit 메소드 동작 이후 컴포넌트나 디렉티브의 상태 변화가 발생할 때마다 호출됩니다. 즉, 변화 감지(change detection) 로직이 실행될 때 호출되는데 컴포넌트의 프로퍼티 값이 변경되거나 DOM 이벤트, Timer 함수의 tick 이벤트, Ajax 통신과 같은 비동기 처리 등이 수행되는 경우가 이에 해당합니다. 하지만 ngDoCheck 메소드는 모든 상태 변화가 발생할 때마다 매번 호출되어 성능에 영향을 줄 수 있기 때문에 이를 고려하여 사용해야 합니다. 

※ ngOnChanges와 ngDoCheck의 차이ngOnChanges는 입력 프로퍼티의 값에 변화에 따라 호출되지만, ngDoCheck은 모든 상태 변화에 따라 호출됩니다.

• ngAfterContentInit

ngContent 디렉티브를 사용하여 자식 컴포넌트에 부모 컴포넌트의 템플릿 조각을 전달(content projection)한 이후 호출됩니다. ngDoCheck 메소드 호출 이후에 한 번만 호출되며 해당 컴포넌트에서만 동작합니다.

 

• ngAfterContentChecked

부모 컴포넌트가 전달한 템플릿 조각을 체크한 후 ngAfterContentInit 메소드 호출 이후에 호출됩니다. ngAfterContentInit 메소드와 마찬가지로 해당 컴포넌트에서만 동작합니다.

 

• ngAfterViewInit

컴포넌트의 View와 ViewChild가 초기화된 이후 호출됩니다. HTML에 작성된 내용이 화면에 모두 출력되고나서 호출되며 해당 컴포넌트에서만 동작합니다.

 

• ngAfterViewChecked

컴포넌트의 View와 ViewChiled를 체크한 이후 호출됩니다. ngAfterViewInit 메소드 호출 이후에 호출되며 컴포넌트의 View에 대한 변화 감지(change detection)가 이루어질 때 동작합니다. ngAfterViewInit 메소드와 마찬가지로 해당 컴포넌트에서만 동작합니다.

 

• ngOnDestroy

컴포넌트나 디렉티브가 소멸하기 이전에 호출됩니다. RxJS의 unsubscribe() 메소드와 같이 메모리 누수 등을 방지하기 위한 내용들을 정의합니다.