[Angular]앵귤러의 ngOnlint 이해하기
컴포넌트에는 생명 주기(Lifecycle)가 있다. 컴포넌트가 생성, 소멸, 업데이트(재렌더링)되는 것을 말한다. 이러한 라이프 사이클 중간에 간섭할 수 있는 것이 바로 라이프 사이클 훅(Hook)이다. ngOnIint은 Angular에서 제공하는 라이프 사이클 훅 중 하나이다.
Angular의 Lifecycle Hook
LifeCycle Hook 호출 시점
| constructor() | 앵귤러의 라이프 사이클 훅을 제치고 가장 먼저 실행 |
|---|---|
| ngOnInit() | 프로퍼티 초기화된 직후 실행 |
| ngOnChanges() | 최초 초기화때 실행,
Input 프로퍼티가 변경될때 Input 데코레이터가 사용된 프로퍼티가 없으면 실행되지 않는다. |
| ngDoCheck() | 모든 데이터의 변경이 일어날 때 실행. |
| ngAfterContentInit() | ngContent 사용 시 자식이 초기화 된 직후 실행. |
| ngAfterContentChecked() | ngContent를 통해 HTML을 받을때 실행. |
| ngAfterViewInit() | 템플릿이 모두 초기화되었을때 실행. |
| ngAfterContentChecked() | 템플릿에 바인딩된 값이 변경되었을때 실행. |
| ngOnDestroy() | Angular가 디렉티브/컴포넌트를 파기하기 전에 하는 청소작업. 옵저버를 삭제하고 메모리 누수를 피하기 위해 이벤트 핸들러를 떼어낸다. Angular가 디렉티브/컴포넌트를 파기하기 전에 호출된다. |
각각의 LifeCycle은 interface 임으로 해당 LifeCycle이 필요한 시점에 implements하여 사용한다.
Contructor와 ngOnIint 비교하기
constructor는 JS의 엔진이 제어하기 하는 클래스 자체의 기능이다. 그렇기 때문에 constructor가 호출되는 시점은 Angular에서 제어할 수 없다. Angular에서 컴포넌트가 초기화 되는 것을 전달하기 위해서 사용되는 것이 바로 ngOnIint이다.
