생명주기후크 ngOnInit()

이번에는 Angular의 생명주기 훅을 다뤄보려고한다.

생명주기 훅은 constructor와 비슷한 역할을 한다.

consturctor는 angular의 기능이 아니라 클래스 자체의 기능(자바스크립트 엔진)이여서 constructor가 호출되는 시점에는 Angular의 제어의 바깥에 있다. 따라서 앵귤러가 컴포넌트를 초기화 했는지 알기에는 적합하지 않다.

 

생명주기 훅을 만든 후 Angular는 컴포넌트가 생성된 후에 설정을 마무리하기 위한 메소드를 한차례 실행할 수 있게 되었다.

 

ngOnInit 앵굴러가 컴포넌트 초기화를 완료했다는 점을 전달하기 위해 존재하며

바인딩한 값을 읽을 수 있다고 보장할 수 있는 상황에서 호출된다.

 

constructor는 최소한으로 초기화해야한다. 일반적으로 컴포넌트는 가볍고 간단하게 생성할 수 있어야 하며 외부에서 데이터를 받아와야하는 로직, 특히 http request를 만나는 함수 같은 것들은 constructor에 존재하면 테스트환경에서 컴포넌트를 생성하거나 화면에 컴포넌트가 표시되기 전에도 외부로 HTTP요청이 발생할 수 있으므로 ngOninit 생명주기 훅안에 불러야 한다. 

+ constructor에는 지역변수를 할당하는 것 이외의 로직은 작성하지 않는 것이 좋음

 

※공식문서에 따르면 ngOnInit()은 default 변화 감지기가 디렉티브의 데이터 바운딩 프로퍼티를 처음으로 감지한 이후 호출되는 콜백메소드이며 이것은 디렉티브가 인스턴스화되었을 때 호출되어진다고 한다.

 

parameter : no

return : void

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

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements OnInit {
  ngOnInit() {
    // ...
  }
}

ngOnInit을 사용하기 위해서는 @angular/core로 부터 OnInit을 import하고 class 호출 뒤에 implements를 해줘야한다.