Angular Academy · 강의

구독 취소와 메모리 누수

takeUntilDestroyed로 누수를 방지합니다.

구독 취소와 메모리 누수은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

메모리 누수 문제

컴포넌트에서 오래 유지되는 옵저버블을 구독한 뒤 구독을 해제하지 않으면 컴포넌트가 제거된 후에도 콜백이 계속 실행됩니다. 이로 인해 메모리 누수와 오류 또는 중복 작업이 발생할 수 있습니다.

수동으로 구독 해제하기

기본적인 해결 방법은 Subscription을 저장하고 ngOnDestroy에서 구독을 해제하는 것입니다.

import { Component, OnDestroy } from '@angular/core';
import { Subscription, interval } from 'rxjs';

export class WidgetComponent implements OnDestroy {
  private sub = interval(1000).subscribe(n => console.log(n));
  ngOnDestroy() { this.sub.unsubscribe(); }
}

여러 구독 관리하기

하나의 Subscription에 .add()로 하위 구독을 모은 다음, 한 번의 unsubscribe()로 모두 정리할 수 있습니다.

private subs = new Subscription();
ngOnInit() {
  this.subs.add(a$.subscribe());
  this.subs.add(b$.subscribe());
}
ngOnDestroy() { this.subs.unsubscribe(); }

takeUntilDestroyed

Angular는 takeUntilDestroyed()를 제공합니다. 컴포넌트가 제거되면 스트림을 자동으로 완료하므로 수동으로 ngOnDestroy를 작성할 필요가 없습니다.

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

export class WidgetComponent {
  constructor() {
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe(n => console.log(n));
  }
}

주입 컨텍스트 요구 사항

인수를 전달하지 않고 호출하는 takeUntilDestroyed()는 생성자와 같은 주입 컨텍스트에서 실행해야 합니다. 그 밖의 위치에서는 DestroyRef를 명시적으로 전달하세요.

import { inject, DestroyRef } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

const destroyRef = inject(DestroyRef);
ngOnInit() {
  source$.pipe(takeUntilDestroyed(destroyRef)).subscribe();
}

takeUntil 패턴(기존 방식)

takeUntilDestroyed가 나오기 전에는 ngOnDestroy에서 값을 방출하는 Subject를 사용하는 것이 표준 방식이었습니다.

private destroy$ = new Subject<void>();
ngOnInit() {
  source$.pipe(takeUntil(this.destroy$)).subscribe();
}
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

완료되는 스트림은 정리할 필요가 없습니다

HttpClient 요청은 한 번 방출한 후 완료되므로 스스로 정리됩니다. 일반적으로 단일 HTTP 호출의 구독을 해제할 필요는 없지만 takeUntilDestroyed를 사용해도 안전합니다.

async 파이프가 대신 처리합니다

템플릿에서는 async 파이프가 자동으로 구독하고 구독을 해제하도록 맡기는 것이 가장 좋습니다. 다음 과정에서 자세히 다룹니다.

// template:
// <div>{{ user$ | async | json }}</div>
// No manual subscribe / unsubscribe needed

구독 누수의 징후

중복 네트워크 요청, 페이지 이동 후에도 실행되는 처리기, 개발자 도구에서 계속 증가하는 메모리, 또는 "Cannot read property of destroyed view" 오류는 구독 해제를 잊었다는 신호일 수 있습니다.

toSignal도 자동으로 정리합니다

옵저버블을 toSignal()로 signal로 변환하면 소유한 컨텍스트가 제거될 때 구독도 자동으로 해제됩니다.

import { toSignal } from '@angular/core/rxjs-interop';

user = toSignal(this.http.get('/api/me'));
// auto-unsubscribed on destroy

방식 선택하기

템플릿에서는 async 파이프 또는 toSignal을 우선 사용하세요. 수동 구독에는 takeUntilDestroyed()를 사용하고, 필요한 경우에만 마지막 수단으로 Subscription 모음을 사용하세요.

빠른 확인

구독 해제에 대한 이해도를 확인해 보세요.

복습: 구독 해제와 메모리 누수

오래 유지되는 구독은 항상 정리하세요.

takeUntilDestroyed()는 제거될 때 자동으로 완료됩니다.
async 파이프와 toSignal()이 구독을 대신 관리합니다.
단일 HTTP 호출은 스스로 완료됩니다.

다음: async 파이프 자세히 알아보기입니다.

자주 묻는 질문

“구독 취소와 메모리 누수” 강의는 무료인가요?

네 — “구독 취소와 메모리 누수” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“구독 취소와 메모리 누수”에서 뭘 배우나요?

takeUntilDestroyed로 누수를 방지합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Angular Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“구독 취소와 메모리 누수” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Angular Academy(으)로 돌아가기