수정하기 - switchMap을 이용한 상태 변화 예시는 무엇인가요?

닉네임

비밀번호

제목

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

switchMap은 RxJS에서 매우 유용한 연산자로, 이전 Observable이 방출한 값을 기준으로 새로운 Observable을 생성할 때 사용됩니다. 특히 비동기 작업이 중첩되거나 연속적으로 발생할 때, 이전 작업을 취소하고 최신 작업만 결과를 반영하고 싶을 때 자주 사용됩니다. 상태 변화 관점에서 switchMap을 사용한 예시를 자세히 설명해 드리겠습니다.    예를 들어, 사용자가 검색어를 입력할 때마다 서버에 API 요청을 보내서 결과를 가져오는 상황을 생각해 보죠. 사용자가 입력하는 텍스트에 따라 상태가 변화하며, 이전의 API 호출 결과는 무시하고 최신 검색어에 대한 결과만 보여줘야 할 때 switchMap이 유용합니다.    ---           상황 설정    - 사용자가 검색어를 입력한다.  - 입력 값이 바뀔 때마다 API 서버에 새 검색 요청을 보낸다.  - 기존 검색 요청이 완료되기 전에 새로운 검색어가 입력되면, 이전 요청은 취소하고 가장 최신 요청 결과만 보여줘야 한다.  - 이렇게 해야 리소스 낭비를 줄이고 UI도 최신 상태를 보장할 수 있다.    ---           코드 예시    ```typescript  import { fromEvent } from 'rxjs';  import { debounceTime, map, switchMap } from 'rxjs/operators';  import { ajax } from 'rxjs/ajax';    const searchInput = document.getElementById('search');    const search$ = fromEvent(searchInput, 'input').pipe(    map(event => event.target.value), // 입력값 추출    debounceTime(300), // 사용자가 타이핑 멈출 때까지 300ms 기다림    switchMap(searchTerm =>       ajax.getJSON(`https://api.example.com/search?q=${searchTerm}`)    )  );    search$.subscribe(results => {    // 여기서 'results'는 최신 검색어에 대한 API 응답 상태임    // 상태 변화를 UI에 반영    console.log('검색 결과:', results);  });  ```    ---           상태 변화 과정 설명    1.   사용자가 입력  을 시작한다.  2. `fromEvent`가 키 입력 이벤트를 감지하고, 입력값을 추출한다.  3. `debounceTime`이 300ms 동안 추가 입력이 없으면 다음 연산 단계로 넘긴다. 이는 잦은 API 호출 방지용.  4. `switchMap`은 입력값을 받아서 실제 API 호출 Observable로 전환한다.  5. 만약 사용자가 새로운 텍스트를 입력하면, 아직 완료되지 않은 이전 API 호출 Observable은 자동으로 취소되고, 최신 입력값 기반으로 다시 API 호출 Observable이 만들어진다.  6. 마지막으로 완료된 API 호출 결과가 구독자에게 전달되고, UI 상태가 변경된다.    이 과정 덕분에 상태 변화는 '입력값' → 'API 요청' → '응답 결과' 순서로 자연스럽게 연결되고, 이전 요청 결과에 의해 상태가 오염되는 것을 방지할 수 있습니다.    ---           요약    - switchMap은   이전 Observable 취소 + 최신 Observable 구독  이라는 특징 때문에 상태 변화에서 '최신성' 보장이 필요한 연속적인 비동기 처리에 아주 적합합니다.  - 상태가 입력 변화 → 비동기 <a href='https://sangseek.com/sangseeks/결과 변화/ko'>결과 변화</a>로 이어질 때, 불필요한 리소스 낭비와 UI의 모호한 상태를 예방해 줍니다.  - 따라서 사용자 입력, 검색, 자동완성, API 요청 상태 관리 등 다양한 상태 변화 시나리오에서 switchMap이 핵심 역할을 합니다.