ANGULAR

[Angular]앵귤러의 ngOnIint 이해하기

Angular

[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이다.

최신글