RxJS Subscription 효과적으로 관리하기

@Component({ template: `<div>{{ data }}</div>` })
export class DataComponent implements OnInit {
  data: string;
 
  ngOnInit() {
    // interval은 무한히 값을 방출하는 Observable
    interval(1000).subscribe(count => {
      this.data = `Count: ${count}`;
      console.log(this.data);
    });
  }
}

// HttpClient - 구독 해제 불필요
this.http.get<User[]>('/api/users').subscribe(users => {
  this.users = users;
  // HTTP 응답 후 Observable이 자동으로 complete됨
});
 
// take(1) - 첫 번째 값만 받고 자동 완료
this.userService.currentUser$
  .pipe(take(1))
  .subscribe(user => {
    this.user = user;
  });

// ❌ 문제가 있는 패턴: 개별 구독 관리
@Component({ template: `...` })
export class DataComponent implements OnInit, OnDestroy {
  private dataSubscription: Subscription;
  private conditionSubscription: Subscription;
  private anotherSubscription: Subscription;
 
  ngOnInit() {
    this.dataSubscription = this.dataService.data$
      .subscribe(value => console.log(value));
 
    this.conditionSubscription = this.conditionService.condition$
      .subscribe(condition => {
        if (condition === 'stop') {
          this.dataSubscription.unsubscribe();
        }
      });
 
    this.anotherSubscription = this.anotherService.stream$
      .subscribe(data => this.handleData(data));
  }
 
  ngOnDestroy() {
    // 각 구독마다 null 체크와 해제 코드 필요
    if (this.dataSubscription) {
      this.dataSubscription.unsubscribe();
    }
    if (this.conditionSubscription) {
      this.conditionSubscription.unsubscribe();
    }
    if (this.anotherSubscription) {
      this.anotherSubscription.unsubscribe();
    }
  }
}

import { Subject, merge, interval } from 'rxjs';
import { takeUntil, filter } from 'rxjs/operators';
 
@Component({ template: `...` })
export class DataComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();
  private stopCondition$ = new Subject<string>();
  private countLimit$ = new Subject<number>();
 
  ngOnInit() {
    // 여러 종료 조건을 merge로 결합
    const terminate$ = merge(
      this.destroy$,
      this.stopCondition$.pipe(filter(v => v === 'stop')),
      this.countLimit$.pipe(filter(v => v >= 10))
    );
 
    this.dataService.data$
      .pipe(takeUntil(terminate$))
      .subscribe({
        next: value => console.log(value),
        complete: () => console.log('구독 종료')
      });
  }
 
  stopManually() {
    this.stopCondition$.next('stop');
  }
 
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

// ❌ 잘못된 위치
source$.pipe(
  takeUntil(this.destroy$),
  switchMap(id => this.http.get(`/api/${id}`)), // 해제되지 않음!
  map(data => data.result)
).subscribe();
 
// ✅ 올바른 위치
source$.pipe(
  switchMap(id => this.http.get(`/api/${id}`)),
  map(data => data.result),
  takeUntil(this.destroy$) // 마지막에 배치
).subscribe();

import { Component, inject, DestroyRef } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { interval } from 'rxjs';
 
@Component({
  selector: 'app-data',
  template: `<p>{{ count }}</p>`
})
export class DataComponent {
  count = 0;
  private destroyRef = inject(DestroyRef);
 
  constructor(private dataService: DataService) {
    // Injection context 내부: DestroyRef 자동 주입
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe(n => this.count = n);
  }
 
  ngOnInit() {
    // Injection context 외부: DestroyRef 명시적 전달
    this.dataService.stream$
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(data => this.handleData(data));
  }
 
  private handleData(data: unknown) {
    // ...
  }
}

@Component({ template: `...` })
export class ExampleComponent {
  private destroyRef = inject(DestroyRef); // ✅ 필드 초기화 - injection context
 
  constructor() {
    // ✅ 생성자 - injection context
    someObservable$.pipe(takeUntilDestroyed()).subscribe();
  }
 
  ngOnInit() {
    // ❌ ngOnInit - injection context 아님
    // takeUntilDestroyed()만 호출하면 에러 발생
    someObservable$
      .pipe(takeUntilDestroyed(this.destroyRef)) // ✅ 명시적 전달
      .subscribe();
  }
}

import { Component, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { HttpClient } from '@angular/common/http';
 
@Component({
  template: `
    @for (user of users(); track user.id) {
      <li>{{ user.name }}</li>
    }
  `
})
export class UserListComponent {
  private http = inject(HttpClient);
 
  // toSignal이 구독과 해제를 자동 관리
  // takeUntilDestroyed, ngOnDestroy 모두 불필요
  users = toSignal(this.http.get<User[]>('/api/users'), {
    initialValue: []
  });
}

import { Component, signal, inject } from '@angular/core';
import { toSignal, toObservable } from '@angular/core/rxjs-interop';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs';
 
@Component({ template: `...` })
export class SearchComponent {
  private searchService = inject(SearchService);
 
  // UI 입력은 Signal로 관리
  query = signal('');
 
  // 복잡한 비동기 로직은 RxJS로 처리 후 다시 Signal로 변환
  results = toSignal(
    toObservable(this.query).pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap(q => this.searchService.search(q))
    ),
    { initialValue: [] }
  );
 
  // 구독 해제 코드 불필요!
}

// ❌ 불완전한 정리
ngOnDestroy() {
  this.destroy$.next();
  // complete() 누락
}
 
// ✅ 완전한 정리
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

// ❌ 중첩 구독 - 내부 구독 누수 가능
this.userId$.subscribe(id => {
  this.http.get(`/api/users/${id}`).subscribe(user => {
    this.user = user;
  });
});
 
// ✅ switchMap 사용 - 이전 내부 구독 자동 취소
this.userId$.pipe(
  switchMap(id => this.http.get(`/api/users/${id}`)),
  takeUntil(this.destroy$)
).subscribe(user => {
  this.user = user;
});

// ❌ effect 재실행 시 구독 누적
effect(() => {
  this.userId(); // signal 읽기
  this.http.get(`/api/users/${this.userId()}`).subscribe(user => {
    this.user.set(user);
  });
});
 
// ✅ toSignal 사용
userId = signal(1);
user = toSignal(
  toObservable(this.userId).pipe(
    switchMap(id => this.http.get(`/api/users/${id}`))
  )
);

// ❌ injection context 외부
ngOnInit() {
  this.users = toSignal(this.http.get('/api/users')); // 런타임 에러!
}
 
// ✅ 필드 초기화
users = toSignal(this.http.get<User[]>('/api/users'), { initialValue: [] });