[Angular 마스터하기] Day 14 - 컴포넌트 생명주기, 적재적소 코드 실행

이제와서 시작하는 Angular 마스터하기 - Day 14 “컴포넌트의 생명주기를 이해하고 활용하세요! 🔄”

오늘 배울 내용

• 생명주기 훅이란
• 주요 생명주기 훅
• 최신 방식: afterNextRender, afterRender
• 실전 활용 예제

---

1. 생명주기 훅

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-lifecycle-demo',
  template: `<p>생명주기 데모</p>`
})
export class LifecycleDemoComponent implements OnInit, OnDestroy {
  ngOnInit() {
    console.log('컴포넌트 초기화됨');
    // API 호출, 초기 설정 등
  }

  ngOnDestroy() {
    console.log('컴포넌트 제거됨');
    // 정리 작업 (타이머 해제, 구독 해제 등)
  }
}

---

2. 주요 생명주기 훅

@Component({
  template: `<p>{{ message }}</p>`
})

export class LifecycleComponent implements OnInit, OnChanges, OnDestroy {
  @Input() data = '';
  message = '';

  // 1. Input 값이 변경될 때
  ngOnChanges(changes: SimpleChanges) {
    console.log('변경됨:', changes);
  }

  // 2. 컴포넌트 초기화
  ngOnInit() {
    console.log('초기화');
    this.message = '안녕하세요!';
  }

  // 3. 뷰가 초기화된 후
  ngAfterViewInit() {
    console.log('뷰 초기화 완료');
  }

  // 4. 컴포넌트 제거 전
  ngOnDestroy() {
    console.log('정리 작업');
  }
}

---

3. 최신 방식

import { Component, afterNextRender, afterRender } from '@angular/core';

@Component({
  selector: 'app-modern-lifecycle',
  template: `<div #content>콘텐츠</div>`
})
export class ModernLifecycleComponent {
  constructor() {
    // 다음 렌더링 후 한 번만 실행
    afterNextRender(() => {
      console.log('렌더링 완료');
    });

    // 매 렌더링마다 실행
    afterRender(() => {
      console.log('렌더링됨');
    });
  }
}

---

4. 실전 예제

@Component({
  selector: 'app-timer',
  template: `
    <div class="timer">
      <h2>{{ seconds }}초</h2>
      <button (click)="toggle()">{{ isRunning ? '정지' : '시작' }}</button>
      <button (click)="reset()">리셋</button>
    </div>
  `
})

export class TimerComponent implements OnInit, OnDestroy {
  seconds = 0;
  isRunning = false;
  private intervalId?: number;

  ngOnInit() {
    console.log('타이머 컴포넌트 시작');
  }

  toggle() {
    this.isRunning = !this.isRunning;

    if (this.isRunning) {
      this.intervalId = window.setInterval(() => {
        this.seconds++;
      }, 1000);
    } else {
      this.clearTimer();
    }
  }

  reset() {
    this.seconds = 0;
    this.isRunning = false;
    this.clearTimer();
  }

  private clearTimer() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
      this.intervalId = undefined;
    }
  }

  ngOnDestroy() {
    console.log('타이머 정리');
    this.clearTimer();  // 메모리 누수 방지!
  }
}

---

📝 정리

생명주기 순서

1. ngOnChanges - Input 변경
2. ngOnInit - 초기화
3. ngAfterViewInit - 뷰 초기화
4. ngOnDestroy - 정리

체크리스트

• ngOnInit을 사용할 수 있나요?
• ngOnDestroy로 정리 작업을 할 수 있나요?
• 타이머를 만들어봤나요?

---

📚 다음 학습

• 이전: Day 13: 파이프
• 다음: Day 15: 에러 처리

---

“생명주기를 이해하면 더 나은 컴포넌트를 만들 수 있습니다!” 🔄