Prologue

React나 Vue와 마찬가지로 SPA 프레임워크인 Angular도 Component Lifecycle(생애주기)가 있다. 익숙한 React를 떠나 Angular를 새로 공부하면서 궁금한 점이 생겨서 기록합니다. Angular의 라이프사이클에서 Constructor와 ngOnInit이 있습니다. 둘 다 초기화 기능을 하는 듯한 느낌이 들어서 차이점을 찾아서 기록한다.

1.차이점

ES6의 constructor메소드는 Angular의 기능이 아니라 클래스 자체의 기능이다. constructor가 호출되는 시점은 Angular의 제어 바깥에 있다. 즉, Angular가 컴포넌트를 초기화 했는지 알기에는 적합하지 않은 위치다. constructor를 호출하는 주체가 Angular가 아닌 자바스크립트 엔진이라는 점이 중요하다. 그런 이유로 ngOnInit 생애주기 훅이 만들어졌다.

import { Component } from '@angular/core';

@Component({})
class ExampleComponent {
  // 이 부분은 Angular가 아닌
  // 자바스크립트에서 실행
  constructor() {
    console.log('Constructor initialised');
  }
}

// 생성자(constructor)를 내부적으로 호출
new ExampleComponent();

2.Constructor의 용도

생애주기 훅을 사용해야 하는 경우도 있지만 constructor를 사용해야 적합한 상황도 있다. 생성자는 의존적인 코드를 컴포넌트에 전달하는 의존성 주입을 하기 위해서는 필수적으로 필요하다. constructor는 자바스크립트 엔진에 의해 초기화 되는데 타입스크립트에서는 Angular에 의존성이 어느 프로퍼티에 적용되는지 직접 지정 안하고도 사용이 가능하다.

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

@Component({})
class ExampleComponent {
  constructor(
    private router: Router,
    private el: ElementRef
  ) {}
}

3.ngOnInit

ngOnInit은 순수하게 Angular가 컴포넌트 초기화를 완료했다는 점을 전달하기 위해 존재합니다. 이 단계에서 컴포넌트에 프로퍼티를 지정하고 첫 변경이 감지되는 범위까지 포함되어 있습니다. '@Input()'는 ngOnInit 내에서 접근 가능하지만 constructor에서는 undefined를 반환하는 방식으로 디자인되어 있습니다.

해당 정리글은 김용균님 기술블로그를 참조했습니다.