Angular의 ngOnDestroy 훅

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

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

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

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

import { OnDestroy } from '@angular/core';

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

export class UserComponent implements OnDestroy {
	
}

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

export class UserComponent implements OnDestroy {
	constructor() {
		console.log('constructor is started');
	}
	
	ngOnDestroy() {
		console.log('onDestroy is applied');
	}
}

if를 사용하여 자식 컴포넌트가 표시되도록 반응적으로 만드세요. 학습한 훅의 동작을 확인하세요.

부모 컴포넌트에 사용자 이름 배열이 있습니다. 사용자를 위한 자식 컴포넌트를 만드세요. 배열을 반복문으로 순회하고 사용자 컴포넌트들을 출력하세요. 버튼을 만들어 클릭 시 배열에서 요소가 삭제되도록 하세요. 자식 컴포넌트에서 삭제 훅이 실행되는지 확인하세요.