Angular Observables 구독을 취소해야 하는 유일한 2가지 방법

쉬운 방법으로 Angular Observable 정리

Angular는 Observable로 가득 차 있습니다. 그러나 구성 요소가 파괴될 때 Observable을 자동으로 구독 취소하는 메커니즘이 있습니까?

구독 정리에 대한 수많은 게시물을 읽었습니다. 다양한 방법이 있지만 정기구독을 언제 어떻게 처리해야 하는지 알려주는 게시물 하나를 놓쳤습니다.

저처럼 이 모든 게시물을 읽는 것을 방지하기 위해 Observables에서 쉽게 구독을 취소하는 방법을 설명하는 실용적인 게시물이 있습니다.

TLDR;

그것에 뛰어들고 싶지 않은 사람들을 위한 짧은 버전 😅. 해결책은 다음과 같습니다.

비동기 파이프

| async async 파이프는 HTML 템플릿에서 Observable을 처리하도록 제공합니다. 비동기 파이프는 구성 요소의 소멸 프로세스 후 구독 취소 프로세스를 자동으로 실행합니다.

걸릴 때까지

takeUntil는 구독하기 전에 .pipe() 메서드에서 호출할 수 있습니다. 이 방법을 사용하면 Subject에 구독을 추가할 수 있습니다. 구독이 몇 개 있는 경우 ngOnDestroy 및 .next() 메서드를 사용하여 .complete() 이벤트에서 구독을 취소할 수 있습니다.

1. 비동기 파이프가 있는 HTML 템플릿의 Observable

Angular는 비동기 파이프| async를 통해 HTML 템플릿에서 Observable을 처리하는 간단한 방법을 제공합니다. 가장 좋은 점은 Angular가 직접 구독 취소 프로세스를 수행하는 대신 구독 취소 프로세스를 수행한다는 것입니다.

특이값에 대해 비동기 파이프를 사용할 수 있습니다.

@Component({
    selector: 'cool-component',
    template: `
        <h1>{{pageTitle$ | async}}</h1>
    `
    ...
})
export class CoolComponent implements OnInit {
    private pageTitle$: Observable<string>;

    constructor(private httpService: HttpClient) {}

    ngOninit(): void {
        this.pageTitle$ = this.httpService.get('some-url.com')
    }
}

또는 개체 또는 배열인 값에 사용할 수 있습니다.

@Component({
    selector: 'cool-component',
    template: `
        <ul>
            <li *ngFor="let item of todoList$ | async">{{item.name}}</li>
        </ul>
    `
    ...
})
export class CoolComponent implements OnInit {
    private todoList$: Observable<string>;

    constructor(private httpService: HttpClient) {}

    ngOninit(): void {
        this.todoList$ = this.httpService.get('other-url.com')
    }
}

따라서 이 구성 요소에서는 ngOnDestroy 로 무언가를 트리거할 필요가 없지만 구성 요소가 소멸되는 동안 구독을 자동으로 구독 취소합니다.

If you want to learn more about the Async pipe in Angular, check out this post "Angular and RxJS: A deep dive into async pipe" by Erxk

2. takeUntil 메소드를 사용한 Observables

HttpClient를 통해 여러 AJAX 요청을 한다고 가정해 보겠습니다. HTML에 직접 전달하지 않고 먼저 데이터로 다른 작업을 수행합니다. 따라서 | async 파이프는 이 상황에 적합하지 않습니다.

이제 여러 구독이 있습니다!

하나씩 구독을 취소하는 대신 어떻게 한 번에 구독을 취소할 수 있습니까?

먼저 구성 요소에서 Subject를 만들어야 합니다.

@Component({...})
export class CoolComponent {
    private unsubscribe$ = new Subject<void>;
}

이Subject는 구독을 저장하는 데 사용됩니다.

이제 ngOnInit 를 사용하여 HttpClient 에서 구독을 만들어 봅시다.

@Component({...})
export class CoolComponent implements OnInit {
    private unsubscribe$ = new Subject<void>;

constructor(private httpService: HttpClient) {}

    ngOninit(): void {
        this.httpService.get('some-url.com')
                .pipe(takeUntil(this.unsubscribe$))
                .subscribe((values) => {
                    // Do something with the data
                })

        this.httpService.get('other-url.com')
                .pipe(takeUntil(this.unsubscribe$))
                .subscribe((values) => {
                    // Do something with the data
                })
    }
}

보시다시피 get() 메서드 뒤에 pipe(takeUntil(this.unsubscribe$)) 가 있습니다. takeUntil를 사용하여 이 Observable의 참조를 unsubscribe$ 주제에 추가합니다.
Subject는 구독 프로세스 중에 두 Observable에 대한 참조를 보유합니다.

@Component({...})
export class CoolComponent implements OnInit, OnDestroy {
    private unsubscribe$ = new Subject<void>;

    constructor(private httpService: HttpClient) {}

    ngOninit(): void {
        this.httpService.get('some-url.com')
                .pipe(takeUntil(this.unsubscribe$))
                .subscribe((values) => {
                    // Do something with the data
                })

        this.httpService.get('other-url.com')
                .pipe(takeUntil(this.unsubscribe$))
                .subscribe((values) => {
                    // Do something with the data
                })
    }

    ngOnDestroy(): void {
        this.unsubscribe$.next();
        this.unsubscribe$.complete();
    }
}

ngOnDestroy() 메서드는 구성 요소가 소멸되기 전에 호출됩니다.

이 메서드에서는 두 가지 메서드를 호출합니다.
next()는 구독에 빈 값을 전달합니다. complete() 를 사용하여 새 값 수신이 완료되었음을 구독에 알립니다.

이제 HttpClient 를 통해 하나 이상의 요청을 만드는 것에 대해 걱정할 필요가 없습니다. 한 번에 모두 멈출 수 있습니다.

Be careful with this method that you don't forget to add the ngOnDestroy method to your component. We are humans, so we forget them.

결론

이 두 가지 전략은 열 가지 상황 중 아홉 가지 상황에서 사용할 수 있으므로 Angular 애플리케이션에서 구현하기에 좋은 계획입니다.

간단한 방법으로 Angular 애플리케이션에서 Observable을 처리하는 방법에 대한 다른 아이디어가 있으면 알려주세요 😉

감사!

*이 이야기를 읽은 후 새로운 것을 배웠거나 새로운 것을 창조하도록 영감을 받았으면 합니다! 🤗 그렇다면 이메일(이 페이지 상단으로 스크롤)을 통해 구독하거나 여기 Hashnode에서 저를 팔로우하세요.
*

Did you know that you can create a Developer blog like this one, yourself? It's entirely for free. 👍💰🎉🥳🔥

답변으로 질문이나 할 말이 남았다면 아래로 스크롤하여 메시지를 입력하세요. 비공개로 하고 싶을 때 를 보내주세요. 제 디엠은 언제나 열려있습니다😁