Angular에서 생명주기(Life Cycle)

 

오늘 공부하게 되었던 내용은 Angular에서 사용되는 생명주기 그중에서도 라이프사이클 훅 메서드들에대해서 사용하게되었습니다. Angular.io에서 여러가지 문서를 보면서 정리한내용입니다.

 

**LifeCycle hooks**

---

컴포넌트와 지시자는 생명주기(Life Cycle)를 가지고있는데 , 생명주기 안에서는 특정 시점에 훅 메서드(hook method)를 호출할 수 있다. 컴포넌트 인스턴스는 Angular가 컴포넌트 클래스의 인스턴스를 생성한 시점부터 미리 정의된 Life Cycle에따라 화면에 렌더링되며 동작합니다.

• 라이프 싸이클 **단계에 따라 화면에 렌더링** 되고 자식 컴포넌트를 화면에 추가합니다.
• 컴포넌트가 동작하는 동안 프로퍼티로 바인딩된 **데이터가 변경되었는지 감지**합니다.
• 값이 변경되면 화면과 컴포넌트 인스턴스에 있는 데이터를 갱신합니다.
• 라이프 싸이클은 Angular가 컴포넌트 **인스턴스를 종료하고 DOM에서 템플릿을 제거할 때 까지** 이어 집니다.
• **디렉티브도 컴포넌트와 비슷**하게 Angular가 인스턴스를 생성하고 갱신하며 종료하는 라이프 싸이클을 따릅니다.

**LifeCycle event**

---

 

훅메서드	용도	실행시점	주의점
ngOnChanges()	바인딩된 입력 프로퍼티 값이 처음 설정되거나 변경될 때 실행됩니다. 이 메서드는 프로퍼티의 이전 값과 현재 값을 표현하는 SimpleChanges 객체를 인자로 받습니다.	(컴포넌트에 입력 프로퍼티가 바인딩된 후) ngOnInit()이 실행되기 전에 한 번 실행되며 입력 프로퍼티로 바인딩된 값이 변경될 때마다 실행됩니다.	매우 자주 실행됩니다. 그래서 이 메서드에 복잡한 로직을 작성하면 애플리케이션 성능이 크게 저하될 수 있습니다.
ngOnInit()	디렉티브나 컴포넌트에 바인딩된 입력 프로퍼티 값이 처음 할당된 후에 실행됩니다.	ngOnChanges()가 처음 실행된 후에 한 번 실행됩니다. ngOnInit() 템플릿에 입력 프로퍼티가 연결되지 않아 ngOnChanges()가 실행되지 않아도 실행
ngDoCheck()	Angular가 검출하지 못한 변화에 반응하거나, Angular가 변화를 감지하지 못하게 할 때 사용합니다.	ngOnInit()이 실행된 직후에 한 번 실행되며, 변화 감지 싸이클이 실행되면서 ngOnChanges()가 실행된 이후에 매번 실행됩니다.
ngAfterContentInit()	Angular가 외부 컨텐츠를 컴포넌트나 디렉티브 뷰에 프로젝션한 이후에 실행됩니다.	ngDoCheck()가 처음 실행된 후 한 번 실행됩니다.
ngAfterContentChecked()	Angular가 디렉티브나 컴포넌트에 프로젝션된 컨텐츠를 검사하고 난 후에 실행됩니다.	ngAfterContentInit()이 실행된 후, ngDoCheck()가 실행된 이후마다 실행됩니다.
ngAfterViewInit()	Angular가 컴포넌트나 디렉티브 화면과 자식 컴포넌트 화면을 초기화한 후에 실행됩니다.	ngAfterContentChecked()가 처음 실행된 후에 한 번 실행됩니다.
ngAfterViewChecked()	Angular가 컴포넌트나 디렉티브 화면과 자식 화면을 검사한 후에 실행됩니다.	ngAfterViewInit()가 실행된 후, ngAfterContentChecked()가 실행된 이후마다 실행됩니다.
ngOnDestroy()	Angular가 디렉티브나 컴포넌트 인스턴스를 종료하기 전에 실행됩니다. 이 메서드는 옵저버블을 구독 해지하거나 이벤트 핸들러를 제거하는 등 메모리 누수를 방지하는 로직을 작성하는 용도로 사용합니다.	Angular가 디렉티브나 컴포넌트 인스턴스를 종료하기 직전에 실행됩니다.

☝️자주 사용되는 라이프사이클은 ngOnChanges(), ngOnInit(), ngOnDestroy()