수정하기 - switchMap으로 다른 Observable과 합치는 방법은?

닉네임

비밀번호

제목

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

switchMap은 RxJS에서 가장 많이 쓰이는 고차 연산자 중 하나로, 한 Observable의 값을 기반으로 새로운 Observable을 생성하고, 이전에 생성된 Observable이 아직 완료되지 않았다면 그것을 취소(구독 해제)하고 새로 생성한 Observable로 전환하는 역할을 합니다. switchMap을 사용하면 서로 다른 Observable들을 효과적으로 합치고 조합할 수 있습니다.      switchMap으로 다른 Observable과 합치는 방법      1.   기본 사용법         switchMap은 주로 소스 Observable의 값이 방출될 때마다 새로운 Observable을 생성해야 할 때 사용합니다. 아래와 같은 구조를 갖습니다.       ```typescript     sourceObservable.pipe(       switchMap(valueFromSource => {         // valueFromSource를 이용해 새 Observable 생성         return someOtherObservable(valueFromSource);       })     )     ```       여기서 `someOtherObservable`은 valueFromSource를 입력으로 받아서 다른 Observable을 생성하는 함수입니다.    2.   다른 Observable과 합치는 과정         예를 들어, 사용자의 입력값을 감지하는 Observable과 서버에서 데이터를 가져오는 Observable을 합칠 경우, 사용자의 입력이 바뀔 때마다 서버 요청 Observable을 생성해야 합니다. 이때 이전 요청이 아직 완료되지 않았으면 취소하고 새 요청을 진행하도록 하는 것이 switchMap의 핵심 기능입니다.       ```typescript     fromEvent(inputElement, 'input').pipe(       map(event => event.target.value),       switchMap(searchTerm => http.get(`api/search?query=${searchTerm}`))     ).subscribe(results => {       console.log(results);     });     ```    3.   내부 Observable 결과를 합치는 패턴         기본적으로 switchMap은 내부 Observable이 방출하는 값을 외부 Observable이 방출하는 것처럼 전달합니다. 즉, `sourceObservable.pipe(switchMap(innerObservable))`의 결과는 내부 Observable의 값이 됩니다.       따라서 switchMap으로 다른 Observable과 합칠 때, 보고 싶은 결과값을 직접 반환하는 Observable을 만들어야 하고, 해당 Observable이 방출하는 값들이 최종 결괏값으로 전달됩니다.    4.   추<a href='https://sangseek.com/sangseeks/가값/ko'>가값</a>을 함께 전달하는 방법         만약 원본 Observable의 값과 내부 Observable의 값을 동시에 사용하고 싶다면, 내부 Observable에서 두 값을 합친 새로운 Observable을 만들어 반환할 수 있습니다.       ```typescript     sourceObservable.pipe(       switchMap(valueFromSource =>         otherObservable(valueFromSource).pipe(           map(valueFromOther => ({ fromSource: valueFromSource, fromOther: valueFromOther }))         )       )     );     ```       이 때 최종 출력은 객체 형태로 두 소스의 값을 함께 받을 수 있습니다.    5.   myObservable.pipe(switchMap(...)) vs myObservable.pipe(concatMap(...)) 차이         switchMap은 내부 Observable이 방출되기 전에 새로운 값이 들어오면 바로 이전 내부 Observable 구독을 해지합니다. 반면 concatMap은 내부 Observable들이 순차적으로 차례대로 실행/구독되도록 보장합니다.       따라서 다른 Observable을 즉시 취소하고 새 Observable로 교체해야 할 때 switchMap을 사용합니다.    6.   요약         - switchMap은 소스 Observable의 각 값마다 새로운 Observable을 생성해서 구독한다.     - 이전에 생성된 내부 Observable이 아직 실행 중이면 취소하고 최신 Observable로 전환한다.     - 내부 Observable이 방출하는 값이 최종 결과로 전달된다.     - 내부 Observable에서 map 연산자를 사용해 원본 값과 내부 값 조합이 가능하다.     - 다른 Observable과 합칠 때, 소스 값으로 새로운 Observable을 만들어 반환하는 방식으로 합친다.    즉, switchMap을 사용하는 가장 흔한 패턴은 "소스 Observable이 값을 방출할 때마다, 그 값을 바탕으로 새로운 Observable을 생성해서, 내부 Observable의 방출값을 최종 Observable의 방출값으로 <a href='https://sangseek.com/sangseeks/치환/ko'>치환</a>함으로써 여러 Observable을 하나로 합치는 것"입니다.