1.Lifecycle Hook Method (라이프사이클 후킹)

1.1 기본개념

• 컴포넌트 인스턴스는 Angular가 컴포넌트 클래스의 인스턴스를 생성한 시점부터 미리 정의된 라이프사이클을 따라 동작하며 라이프사이클 단계에 따라 화면에 렌더링되고 자식 컴포넌트를 화면에 추가합니다. 그리고 디렉티브도 컴포넌트와 비슷하게 Angular가 인스턴스를 생성하고 갱신하며 종료하는 라이프사이클을 따릅니다.

• Application에서 Lifecycle hook method를 사용하면 컴포넌트나 디렉티브가 동작하는 라이프사이클에 개입할 수 있습니다. 그래서 인스턴스가 생성되는 시점, 데이터가 변화가 감지하는 시점, 데이터 변화가 감지된 이후 시점, 인스턴스가 종료되는 시점에 원하는 동작을 할 수 있습니다.

1.2 라이프사이클 이벤트에 반응하기

• Angular core 라이브러리의 라이프사이클 훅 인터페이스에 정의된 메서드를 컴포넌트나 디렉티브 클래스에 구현하면 해당 라이프사이클에 반응할 수 있습니다. 그래서 Angular가 컴포넌트나 디렉티브 인스턴스를 초기화하고, 갱신하며, 종료하는 시점에 원하는 동작을 실행할 수 있습니다.
• 각 인터페이스에는 라이프사이클 후킹 메서드가 하나씩 정의되어 있으며, 이 메서드의 이름은 인터페이스 이름에 ng 접두사를 붙인 형태입니다.

1.3 라이프사이클 이벤트 순서

1) Constructor

- 용도

Component 혹은 Directive가 생성될 때 호출됩니다. 사실 constructor는 Angular의 lifecycle의 단계에 포함될 내용은 아닙니다. TypeScript에서는 일반적으로 constructor에서 초기화를 진행합니다. 하지만 Angular에서 사용하는 속성의 초기화는 ngOnInit에서 하는것이 좋습니다.

2) ngOnChanges

- 용도

'@Input'을 이용해 Component가 자식 Component에게 데이터를 전달할 수 있습니다. ngOnChanges는 부모 Component에서 자식 Component로 데이터가 binding 될 때 혹은 변경되었을 때 호출됩니다. 따라서 @Input 데코레이터를 사용하지 않으면 호출되지 않습니다. 정확하게는 부모 Component로부터 자식 Component에게 전달하는 primitive 값이 변경되거나 참조하는 객체의 reference가 변경되어야 호출됩니다. ngOnChanges hook method의 인자로 SimpleChanges 객체를 하나 받을 수 있습니다. 해당 객체를 이용하면 변경되기 이전값과 이후값등을 알 수 있습니다.

- 실행시점

ngOnInit()이 실행되기 전 한 번 실행되며 입력 프로퍼티로 바인딩된 값이 변경될 때마다 실행됩니다. 컴포넌트에 입력 프로퍼티가 없거나, 선언하고 사용하지 않는다면 ngOnChange()가 실행되지 않습니다.

3) ngOnInit()

- 용도

디렉티브나 컴포넌트에 바인딩된 입력 프로퍼티 값이 처음 할당된 후에 실행됩니다. ngOnChanges가 호출된 이후에 모든 속성에 대한 초기화가 완료된 시점에 딱 한번만 호출됩니다. 즉, class가 가지고 있는 속성과 @Input을 통해 값을 내려받는 속성이 모두 초기화가 된 이후에 호출됩니다. 결국 Component의 속성 참조는 ngOnInit hook method이후에 참조하는 것이 좋습니다. 결국 생성자는 Service의 Injection같은 사항을 처리하고 속성에 대한 초기화는 ngOnInit에서 처리하시는게 좋다는 말입니다.

- 실행시점

ngOnChanges()가 처음 실행된 후에 한 번 실행됩니다.

4) ngDoCheck()

- 용도

Angular가 검출하지 못한 변화에 반응하거나, Angular가 변화를 감지하지 못하게 할 때 사용합니다.

- 실행시점

ngOnInit()이 실행된 직후에 한 번 실행되며, 변화 감지 사이클이 실행되면서 ngOnChanges()가 실행된 이후에 매번 실행됩니다.

5) ngAfterContentInit()

- 용도

Angular가 외부 컨텐츠를 컴포넌트나 디렉티브 뷰에 프로젝션한 이후에 실행됩니다.

- 실행시점

ngAfterContentInit()이 실행된 후, ngDoCheck()가 실행된 이후마다 실행됩니다.

6) ngAfterViewInit()

- 용도

Angular가 컴포넌트나 디렉티브 화면과 자식 컴포넌트 화면을 초기화한 후에 실행됩니다.

- 실행시점

ngAfterContentChecked()가 처음 실행된 후에 한 번 실행됩니다.

7) ngAfterViewChecked()

- 용도

Angular가 컴포넌트나 디렉티브 화면과 자식 화면을 검사한 후에 실행됩니다.

- 실행시점

ngAfterViewInit()가 실행된 후, ngAfterContentChecked()가 실행된 이후마다 실행됩니다.

8) ngOnDestroy()

- 용도

Angular가 디렉티브나 컴포넌트 인스턴스를 종료하기 전에 실행됩니다. 이 메서드는 옵저버블을 구독 해지하거나 이벤트 핸들러를 제거하는 등 메모리 누수를 방지하는 로직을 작성하는 용도로 사용합니다.

- 실행시점

Angular가 디렉티브 컴포넌트 인스턴스를 종료하기 직전에 실행됩니다.