앵귤러 라이프사이클 훅

내내 백엔드 개발을 하던 입장에서, 프레임워크를 사용해서 간단한 페이지를 담고 데이터의 상태관리를 하는 방식의 프론트 개발이 너무 낯설고 배워야 할 점이 많았다.

앵귤러의 라이프사이클 훅에 대해 아래 공식 가이드 글을 보면서 정리해봤다.

https://angular.kr/guide/lifecycle-hooks

라이프사이클 이벤트?

앵귤러 코어 라이브러리의 라이프사이클 훅 인터페이스에 정의된 메서드를 앵귤러가 관리하는 컴포넌트나 디렉티브 클래스에 구현하면 해당 라이프사이클에 대해 반응할 수 있다.

사실 이 개념은 스프링 개발자에게는 낯설지 않다.

• 스프링 프레임워크의 수 많은 기능들이 웹 어플리케이션 서버를 개발하는 입장에서 가지고 가야 할 기능들이다.
• 빈 정의를 통해 그것을 알맞게 커스텀해서 사용하거나
• AOP를 통해 특정 타이밍에 특정 기능을 실행하는 방식의 개발을 이미 해오고 있었기 때문이다.

라이프사이클 순서는 어떻게 될까?

가장 중요하고도 헷갈리는 개념이었는데,

앵귤러 어플리케이션이 컴포넌트나 디렉티브 클래스의 생성자를 실행하면서 인스턴스를 초기화한 다음, 정해진 시점에 라이프사이클 메서드가 실행된다.

즉 컴포넌트 / 디렉티브 클래스의 생성자는 무조건 먼저 실행되는 것이고, 각종 의존성 주입이 이 시점에 일어난다. 그 이후에 다음 라이프사이클 메서드가 실행된다.

• ngOnChanges(): 바인딩된 입력 프로퍼티 값이 처음 설정되거나, 변경될 때마다 실행된다.
• ngOnInit(): 디렉티브 / 컴포넌트에 바인딩된 입력 프로퍼티 값이 처음 할당된 후에 실행된다. ngOnChanges()가 실행되지 않아도 실행된다.
• ngDoCheck(): 앵귤러가 검출하지 못한 변화에 반응하거나, 변화를 감지하지 못하게 할 때 사용한다. ngOnInit()이 실행된 직후에 한번 실행되고, ngOnChanges() 실행된 이후에 매번 실행된다.
• ngAfterContentInit(): 앵귤러가 외부 컨텐츠를 컴포넌트 / 디렉티브 뷰에 프로젝션한 이후에 실행한다. ngDoCheck()가 처음 실행된 이후 한 번 실행된다.
• ngAfterContentChecked(): 앵귤러가 컴포넌트 / 디렉티브에 프로젝션된 컨텐츠 검사 이후에 실행한다. ngAfterContentInit()이 실행된 후, ngDoCheck()이 실행된 이후마다 실행된다.
• ngAfterViewInit(): 앵귤러가 컴포넌트 / 디렉티브 화면, 자식 화면을 초기화 한 후에 실행된다. ngAfterContentChecked()가 처음 실행된 이후에 한 번 실행된다.
• ngAfterViewChecked(): 앵귤러가 컴포넌트 / 디렉티브 화면, 자식 화면을 검사한 후에 실행된다. ngAfterViewInit()가 실행된 후, ngAfterContentChecked()가 실행된 이후마다 실행된다.
• ngOnDestroy(): 앵귤러가 컴포넌트 / 디렉티브 인스턴스를 종료하기 전에 실행된다. 옵저버블을 구독 해지하거나 이벤트 핸들러를 제거하는 등, 메모리 누수 방어 로직이 들어가는 곳이다.

주의해야 할 점

• 컴포넌트 생성자는 앵귤러 라이프사이클 훅 함수가 실행되기 이전에 실행된다. 즉 ngOnInit() 실행 전에 실행된다.
• 자바스크립트의 클로저 개념 때문에 이벤트 핸들러 / 옵저버블의 구독 관계를 적절한 시점에 해지하는 것은 매우 중요할 수 있다. ngOnDestroy() 시에 반드시 해지해줘야 한다.