Angular의 ngOnDestroy 훅

ngOnDestroy 훅은 컴포넌트가 제거될 때 실행됩니다. 이 훅에서 리소스를 해제하거나, 요소 이벤트에 대한 구독을 삭제하거나, 타이머를 정리하는 등의 작업을 수행할 수 있습니다.

Angular에서 컴포넌트의 생성과 제거는 if 조건을 사용하여 컴포넌트가 반응적으로 표시되고 숨겨질 때 발생합니다. 즉, Angular는 컴포넌트를 단순히 숨기지 않고 제거했다가 다시 돌려받습니다.

또한 컴포넌트는 반복문 안에서 반응적으로 순회될 때도 생성되고 제거됩니다. 이 경우에도 Angular는 컴포넌트를 생성하고 제거합니다.

실제로 연습해 봅시다. OnDestroy 인터페이스를 임포트합니다:

app/user/user.component.tsimport { OnDestroy } from '@angular/core';

클래스에 인터페이스를 연결합니다:

app/user/user.component.tsexport class UserComponent implements OnDestroy {
  
}

이제 훅을 작성해 보겠습니다:

app/user/user.component.tsexport class UserComponent implements OnDestroy {
  constructor() {
    console.log('constructor is started');
  }
  
  ngOnDestroy() {
    console.log('onDestroy is applied');
  }
}