수정하기 - switchMap을 사용한 상태 관리 예시는 무엇인가요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

switchMap은 RxJS에서 자주 사용되는 연산자로, 특히 비동기 데이터 스트림을 관리할 때 유용합니다. 상태 관리를 할 때 switchMap을 사용하면, 이전에 실행되던 비동기 작업을 취소하고 가장 최근에 시작된 작업의 결과만 처리할 수 있습니다. 이를 통해 불필요한 데이터 처리와 상태 업데이트를 방지하여 효율적이고 일관된 상태 관리를 할 수 있습니다.           switchMap을 사용한 상태 관리 예시 (Angular + RxJS)    예를 들어, 사용자가 검색어를 입력할 때마다 API를 호출하여 검색 결과를 가져오는 컴포넌트가 있다고 가정해 보겠습니다. 이때 사용자가 빠르게 검색어를 변경하면 여러 API 요청이 중첩될 수 있는데, 이전 요청은 취소하고 가장 최신 검색어에 대한 요청 결과만 상태로 반영하고 싶습니다.    ```typescript  import { Component } from '@angular/core';  import { FormControl } from '@angular/forms';  import { Observable } from 'rxjs';  import { debounceTime, distinctUntilChanged, switchMap, catchError } from 'rxjs/operators';  import { SearchService } from './search.service';    @Component({    selector: 'app-search',    template: `      <input type="text" [formControl]="searchTerm" placeholder="검색어 입력">      <ul>        <li *ngFor="let item of results$ | async">{{ item.name }}</li>      </ul>    `  })  export class SearchComponent {    searchTerm = new FormControl('');    results$: Observable<SearchResult[]>;      constructor(private searchService: SearchService) {      this.results$ = this.searchTerm.valueChanges.pipe(        debounceTime(300),                // 사용자가 입력을 멈출 때까지 300ms 대기        distinctUntilChanged(),           // 이전 값과 달라야 진행        switchMap(term => this.searchService.search(term).pipe(          catchError(() => [ ])           // 에러가 나면 빈 배열 반환        ))      );    }  }  ```           동작 설명  - `searchTerm.valueChanges`는 사용자의 입력 변화를 스트림으로 제공합니다.  - `debounceTime(300)`는 사용자가 300ms 동안 입력을 멈출 때까지 기다려, 너무 잦은 API 호출을 방지합니다.  - `distinctUntilChanged()`는 이전 검색어와 동일하면 API 호출을 하지 않도록 합니다.  - `switchMap`은 새 검색어가 들어올 때마다 이전에 진행 중이던 검색 API 호출을 취소하고, 최신 검색어에 대한 API 호출 결과만 스트림에 내보냅니다.  - `catchError`는 API 호출 중 에러가 발생할 경우 빈 결과 배열을 반환하여 UI가 중단되지 않게 도와줍니다.           요약  - switchMap은 특히 최신 상태만 반영하고 싶을 때 매우 유용합니다.  - 비동기 요청이 많고 중첩될 가능성이 있는 상황에서 이전 요청을 취소하고 최신 요청의 데이터만 상태에 반영할 수 있습니다.  - 덕분에 불필요한 상태 업데이트와 메모리 누수를 방지하면서, 사용자의 최신 입력에만 집중한 상태 관리가 가능합니다.