Angular 스터디 # 4 라이프 사이클 후크

수명 주기 후크

Angular에 한정되지 않고, 많은 View 프레임워크에는 「라이프 사이클」이라고 하는 생각이 있다. 이것은 View의 생성으로부터 파기까지의 상태 천이를 정의한 것으로, 모든 View 요소를 같은 라이프 사이클로 관리하는 것으로, 효율적이고 확장하기 쉬운 View 구조로 하고 있다.

"확장 용이성"을 생성하기 위해 View의 각 라이프 사이클에 처리를 삽입 할 수 있습니다. 이것을 라이프사이클 훅이라고 하며, 많은 View 프레임워크로 표준적으로 갖추어져 있는 기능이 된다.

Angular에서는, View를 관리하는 Component에 있어서, 라이프 사이클 훅이 가능하게 되어 있다.

Angular Component의 수명주기

Angular의 공식 문서 참조

ngOnXXX를 구독하려면

각각 대응하는 Interface가 준비되어 있으므로, Component내에서 그것을 구현하면 된다.
호출은 Angular가 마음대로 가준다.

export class ComponentOverviewComponent implements OnInit {
  ngOnInit(): void {}
}

ngOnDestroy는 마지막 요새

ngOnDestroy는 컴포넌트를 삭제할 때 파이널라이저와 같은 역할을 하고, 컴포넌트 내에서 이용하고 있는 리소스의 후시말을 실시할 필요가 있다(그것을 게을리하면 메모리 누수가 되어, 퍼포먼스에 큰 영향을 준다)

대표적인 것은

DOM 요소에 대한 이벤트 핸들러 (onClick 등)

Promise와 같은 콜백 객체 등록

Observable 요소 구독

타이머 정지