03 라이프사이클 후크(Lifecycle hooks) 01

라이프사이클 훅

컴포넌트의 수명주기는 Angular가 관리합니다.

Angular는 컴포넌트를 만들고, 렌더링하고, 자식 컴포넌트를 만들고 렌더링하고, 데이터 바인딩 프로퍼티가 변경 될 때 이를 검사하고, DOM에서 제거하기 전에 컴포넌트를 삭제합니다.

Angular는 이러한 주요 삶의 순간에 대한 가시성을 제공하고 발생할 때 행동 할 수있는 라이프 사이클 후크를 제공합니다.

디렉티브에는 컴포넌트 내용 및 뷰와 관련된 후크를 제외한 라이프 사이클 후크 세트가 있습니다.

 

컴포넌트 라이프 사이클 후크 개요

디렉티브와 컴포넌트 인스턴스는 Angular가 수명주기를 생성하고, 업데이트 및 소멸시킴으로써, 수명주기를 가집니다. 개발자는 Angular의 core 라이브러리에 라이프 사이클 후크 인터페이스 중 하나 이상을 구현하여 라이프 사이클의 핵심 순간을 활용할 수 있습니다.

각 인터페이스에는 인터페이스 이름 앞에 ng가 붙는 단일 훅 메소드가 있습니다. 예를 들어 OnInit 인터페이스에는 컴포넌트를 만든 직후 Angular가 호출하는 ngOnInit()이라는 후크 메서드가 있습니다.

peek-a-boo.component.ts (excerpt)

export class PeekABoo implements OnInit {   constructor(private logger: LoggerService) { }     // implement OnInit's `ngOnInit` method   ngOnInit() { this.logIt(`OnInit`); }     logIt(msg: string) {     this.logger.log(`#${nextId++} ${msg}`);   } }

디렉티브나 컴포넌트가 모든 라이프 사이클 후크를 구현하지 않으며 일부 후크는 컴포넌트에만 의미가 있습니다. Angular는 디렉티브/컴포넌트 후크 메서드가 정의 된 경우에만 메서드를 호출합니다.