Angular 컴포넌트의 생명주기 훅(lifecycle hook)은 무엇인가요?

Question

Accepted Answer

**생명주기 훅**은 컴포넌트 수명의 특정 순간(생성, 입력 변경, 렌더링, 파괴)에 Angular가 호출하는 메서드입니다. 컴포넌트 클래스에 인터페이스 메서드를 추가하여 구현합니다.

## 주요 훅을 순서대로

```ts
import { Component, OnInit, OnDestroy, OnChanges, SimpleChanges } from "@angular/core";

@Component({ ... })
export class MyComponent implements OnInit, OnDestroy, OnChanges {
  ngOnChanges(changes: SimpleChanges) {
    // @Input 값이 변경될 때 호출 (첫 번째 ngOnInit 이전)
  }
  ngOnInit() {
    // 첫 번째 ngOnChanges 이후 한 번 호출 — 초기화, 데이터 가져오기
  }
  ngOnDestroy() {
    // 컴포넌트가 제거되기 직전 호출 — 여기서 정리(CLEAN UP)
  }
}
```

## 전체 순서

```text
constructor          → DI 발생; 입력은 아직 사용 불가
ngOnChanges          → @Input 값이 설정/변경될 때
ngOnInit             → 첫 ngOnChanges 이후 한 번 ★ (초기화, 데이터 가져오기)
ngDoCheck            → 모든 change detection 실행 시 (커스텀 change detection)
ngAfterContentInit   → 프로젝션된 콘텐츠(<ng-content>) 초기화됨
ngAfterViewInit      → 컴포넌트 뷰 + 자식 뷰 준비됨 ★ (@ViewChild 접근)
ngAfterViewChecked   → 각 뷰 검사 이후
ngOnDestroy          → 제거 직전 ★ (구독 해제, 타이머 정리)
```

## 가장 많이 쓰는 세 가지

```ts
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 구독 해제, 타이머 정리, 리스너 제거.

## 생성자보다 ngOnInit을 쓰는 이유

생성자는 DI만 수행해야 하며, 그곳에서는 입력이 아직 바인딩되지 않았습니다. `ngOnInit`은 Angular가 컴포넌트와 그 입력을 설정한 후에 실행되므로, 시작 로직을 위한 올바른 위치입니다.

## 왜 중요한가

생명주기 훅은 적절한 시점에 로직을 실행하게 해줍니다. `ngOnInit`에서 초기화하고, `ngAfterViewInit`에서 렌더링된 뷰에 접근하며, 결정적으로 **`ngOnDestroy`에서 정리**합니다(Observable 구독 해제는 Angular에서 메모리 누수를 피하는 가장 중요한 방법입니다).

순서와 각 훅의 역할을 아는 것은 올바른 데이터 가져오기, DOM 접근, 리소스 관리에 필수적입니다.