생명주기 훅은 컴포넌트 수명의 특정 순간(생성, 입력 변경, 렌더링, 파괴)에 Angular가 호출하는 메서드입니다. 컴포넌트 클래스에 인터페이스 메서드를 추가하여 구현합니다.
주요 훅을 순서대로
ts
{ , , , , } ;
({ ... })
, , {
() {
}
() {
}
() {
}
}
constructor → DI 발생; 입력은 아직 사용 불가
ngOnChanges → @Input 값이 설정/변경될 때
ngOnInit → 첫 ngOnChanges 이후 한 번 ★ (초기화, 데이터 가져오기)
ngDoCheck → 모든 change detection 실행 시 (커스텀 change detection)
ngAfterContentInit → 프로젝션된 콘텐츠(<ng-content>) 초기화됨
ngAfterViewInit → 컴포넌트 뷰 + 자식 뷰 준비됨 ★ (@ViewChild 접근)
ngAfterViewChecked → 각 뷰 검사 이후
ngOnDestroy → 제거 직전 ★ (구독 해제, 타이머 정리)
ngOnInit() {
this.userService.getUsers().subscribe(u => this.users = u); // 초기화/가져오기 — 입력이 준비됨
}
ngAfterViewInit() {
this.chart.nativeElement.focus(); // 이제 DOM/@ViewChild가 존재
}
ngOnDestroy() {
this.subscription.unsubscribe(); // 메모리 누수 방지!
clearInterval(this.timer);
}
ngOnInit — 초기화 및 데이터 가져오기를 위한 표준 위치입니다(생성자와 달리 여기서는 @Input이 사용 가능합니다).ngAfterViewInit — 자식 뷰와 @ViewChild 참조가 존재할 때입니다.ngOnDestroy — 정리: Observable 구독 해제, 타이머 정리, 리스너 제거.생성자는 DI만 수행해야 하며, 그곳에서는 입력이 아직 바인딩되지 않았습니다. ngOnInit은 Angular가 컴포넌트와 그 입력을 설정한 후에 실행되므로, 시작 로직을 위한 올바른 위치입니다.
생명주기 훅은 적절한 시점에 로직을 실행하게 해줍니다. ngOnInit에서 초기화하고, ngAfterViewInit에서 렌더링된 뷰에 접근하며, 결정적으로 ngOnDestroy에서 정리합니다(Observable 구독 해제는 Angular에서 메모리 누수를 피하는 가장 중요한 방법입니다).
순서와 각 훅의 역할을 아는 것은 올바른 데이터 가져오기, DOM 접근, 리소스 관리에 필수적입니다.