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

라이프 사이클 순서

생성자를 호출하여 컴포넌트/디렉티브 만든 후 Angular는 다음 순서로 라이프 사이클 후크 메서드를 호출합니다.

후크	목적과 타이밍
ngOnChanges()	Angular 가 데이터 바인딩 된 입력 프로퍼티를 설정할 때 응답합니다. 이 메소드는 현재 및 이전 프로퍼티 값의 SimpleChanges 오브젝트를 수신합니다. ngOnInit()보다 먼저 호출되고, 하나 이상의 데이터 바인딩 입력 프로퍼티가 변경 될 때마다 호출됩니다.
ngOnInit()	Angular가 먼저 데이터 바인딩 된 프로퍼티를 표시하고 디렉티브/컴포넌트의 입력 프로퍼티를 설정 한 후에 디렉티브/컴포넌트를 초기화합니다. 첫 번째 ngOnChanges() 이후에 한 번 호출됩니다.
ngDoCheck()	Angular가 자체적으로 감지 할 수 없거나 감지하지 않을 변경 사항을 감지하고 이에 대응합니다. 모든 변경 감지 실행 중에 ngOnChanges() 및 ngOnInit() 바로 뒤에 호출됩니다.
ngAfterContentInit()	Angular가 외부 콘텐츠를 컴포넌트 뷰에 투영한 후에 응답합니다. 첫 번째 ngDoCheck() 이후에 한 번 호출됩니다. 컴포넌트 전용 후크.
ngAfterContentChecked()	Angular가 컴포넌트로 투영된 내용을 검사한 후에 응답합니다. ngAfterContentInit()과 모든 ngDoCheck ()이후에 호출됩니다. 컴포넌트 전용 후크.
ngAfterViewInit()	Angular가 컴포넌트 뷰와 자식 뷰를 초기환한 후에 응답합니다. 첫 번째 ngAfterContentChecked() 이후에 한 번 호출됩니다. 컴포넌트 전용 후크.
ngAfterViewChecked()	Angular가 컴포넌트의 뷰와 하위 뷰를 검사한 후에 응답합니다. ngAfterViewInit 및 모든 ngAfterContentChecked()이후에 호출됩니다. 컴포넌트 전용 후크.
ngOnDestroy	Angular가 디렉티브/컴포넌트를 소멸시키기 바로 전에 정리합니다. Observables를 구독 취소하고 메모리 누수를 피하기 위해 이벤트 처리기를 분리합니다. Angular가 디렉티브/컴포넌트를 소멸시키지 직전에 호출됩니다.

 

(기술적으로) 인터페이스는 선택 사항입니다

자바 스크립트 및 Typescript 개발자는 인터페이스를 기술적 인 관점에서 선택할 수 있습니다. 자바 스크립트 언어에는 인터페이스가 없습니다. Angular는 번역 된 JavaScript에서 사라지기 때문에 런타임에 TypeScript 인터페이스를 볼 수 없습니다.

다행히도, 인터페이스는 필요하지 않습니다. 디렉티브와 컴포넌트에 라이프 사이클 후크 인터페이스를 추가 할 필요가 없으므로 후크 자체의 이점을 누릴 수 있습니다.

Angular는 대신 디렉티브 및 컴포넌트 클래스를 검사하고, 정의 된 경우 후크 메소드를 호출합니다. Angular는 인터페이스존재와 상관없이 ngOnInit()과 같은 메소드를 찾고 호출합니다.

그럼에도 불구하고 강력한 타이핑 및 편집기 도구에서 제공하는 이익을 얻으려면 TypeScript 디렉티브 클래스에 인터페이스를 추가하는 것이 좋습니다.

 

기타 Angular 라이프 사이클 후크

다른 앵귤러 서브 시스템은 이러한 컴포넌트 후크와 별개로 자체 라이프 사이클 후크를 가질 수 있습니다.

서드파티 라이브러리는 개발자가 이러한 라이브러리 사용 방법을 보다 잘 제어 할 수 있도록하기 위해 후크를 구현할 수도 있습니다.