[Angular] Lifecycle(생명 주기) hooks

1. Lifecycle(생명주기)

Angular가 구성 요소 클래스를 인스턴스화하고 하위 뷰와 함께 렌더링할 때 생명주기가 시작되며 Angular가 인스턴스를 삭제하고 렌더링된 템플릿을 Dom에서 제거 하면 그 주기 가 종료 됩니다.

Lifecycle의 역할

생명주기가 계속 되는동안 Angular는 데이터 바인딩된 속성이 변경되는 시기를 확인하고 필요에 따라 뷰와 구성 요소를 업데이트 하는 역할을 합니다.

디렉티브도 Angular 실행 과정에서 인스턴스를 생성, 업데이트 및 파괴하므로 생명 주기가 비슷합니다.

다음 글을 디렉티브에 대한 내용을 쓰겠습니다.

2. Lifecycle 이벤트 시퀀스

애플리케이션이 생성자를 호출하여 구성 요소 또는 지시문을 인스턴스화한 후 Angular는 해당 인스턴스의 생명 주기에서 적절한 시점에 구현한 후크 메서드를 호출합니다.

1.ngOnChanges()

목적

Angular가 데이터 바인딩된 입력 속성을 설정하거나 재설정할 때 응답합니다. 메서드는 현재 및 이전 속성 값의 개체를 받습니다.

타이밍

ngOnInit()이전 (구성 요소에 바인딩된 입력이 있는 경우) 및 하나 이상의 데이터 바인딩된 입력 속성이 변경될 때마다 호출 됩니다.

2.ngOnInit()

목적

Angular가 먼저 데이터 바인딩 속성을 표시하고 지시문 또는 구성 요소의 입력 속성을 설정한 후 지시문 또는 구성 요소를 초기화합니다.

타이밍

1. ngOnChanges()가 처음 실행된 후 한번실행 됩니다.
2. ngOnInit() 템플릿에 입력 프로퍼티가 연결되지 않아 ngOnChange()가 실행 되지 않아도 실행됩니다.

3. ngDoCheck()

목적

Angular가 자체적으로 감지할 수 없거나 Angular가 변화를 감지하게 하지 못하게 할때 사용합니다.
타이밍
1. ngOnInit()이 실행된 직후에 한변 실행됩니다.
2. 모든 변경 감지 실행 직후 ngOnChanges() 실행 됩니다.

4. ngAfterContentInit()

목적

Angular가 외부 콘텐츠를 구성 요소의 뷰 또는 디렉티브가 있는 뷰로 투한 후 응답합니다 .

타이밍

ngDoCheck()가 실행된 후 한번 실행 됩니다.

5. ngAfterContentChecked()

목적

Angular가 디렉티브또는 구성 요소에 투영된 콘텐츠를 확인 한 후 응답합니다.

타이밍

1. ngAfterContentInit() 실행된후 호출 됩니다.
2. ngDoCheck() 실행된 이후 매번 실행 됩니다.

6. ngAfterViewInit()

목적

Angular가 컴포넌트나 디렉티브 화면과 자식 컴포넌트 화면을 초기화한 후에 실행됩니다.

타이밍

ngAfterContentChecked()호출 된 후 실행 됩니다.

7.ngAfterViewChecked()

목적

Angular가 구성 요소의 뷰와 하위 뷰를 확인 후 응답합니다.

타이밍

1.ngAfterViewInit()이후 실행됩니다.
2.ngAfterContentChecked()실행된 후 매번 사용합니다.

8. ngOnDestroy()

목적

Angular가 디렉티브 또는 구성 요소를 파괴하기 직전에 정리합니다. Observables 구독을 취소하고 이벤트 핸들러를 분리하여 메모리 누수를 방지합니다

타이밍

Angular가 디렉티브 또는 구성요소를 파괴하기 직전에 사용합니다.



참고
https://angular.io/guide/lifecycle-hooks

Angular