상식닷컴
로그인
가입하기
2026년 상식닷컴 선정 식당 & 카페 리스트
2025년 2026년 신상 호텔 리스트
최근에 오픈한 호텔을 찾는다면 살펴보세요
일주일 식단표 어플
자동 일주일 식단표 어플
안드로이드
아이폰
주식 & 코인 차트의 신
1000만원으로 2000만원 만들기 프로젝트
수정하기 - switchMap을 사용하여 여러 조건부 요청을 처리하는 방법은?
닉네임
비밀번호
제목
내용
[이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]
switchMap을 사용하여 여러 조건부 요청을 처리하는 방법에 대해 자세히 설명드리겠습니다. --- 기본 개념 `switchMap`은 RxJS에서 가장 많이 사용하는 고차 연산자 중 하나입니다. 내부에서 새로운 Observable을 반환하는 함수를 받아서, 원본 Observable이 새로운 값을 방출할 때마다 기존에 구독하고 있던 내부 Observable을 취소하고, 최신 값으로부터 생성된 Observable을 구독하는 역할을 합니다. 이 특성 때문에, 여러 조건에 따라 서로 다른 HTTP 요청이나 비동기 작업을 처리할 때 매우 유용합니다. 예를 들어, 사용자의 입력 변화에 따라 적절한 API를 호출하거나, 특정 조건에 따라 다양한 요청을 동적으로 처리할 수 있습니다. --- 여러 조건부 <a href='https://sangseek.com/sangseeks/요청 처리/ko'>요청 처리</a>하기 가장 일반적인 패턴은 원본 Observable(예: UI 입력값, 특정 이벤트)으로부터 들어오는 값에 따라, 조건문을 활용해 서로 다른 Observable들을 반환하는 것입니다. 예를 들어, 다음과 같은 시나리오를 고려해 봅시다: - 입력 값이 빈 문자열이면, 빈 배열을 반환하는 비동기 요청을 수행한다(예: 서버 호출 없이 빈 결과 반환). - 입력 값이 특정 문자열 패턴에 부합하면, A API를 호출한다. - 그 밖의 경우에는 B API를 호출한다. --- 구현 예시 ```typescript import { of, EMPTY } from 'rxjs'; import { switchMap } from 'rxjs/operators'; inputObservable.pipe( switchMap(value => { if (!value) { // 값이 없으면 빈 배열 반환 (HTTP 요청 없이) return of([]); } else if (/patternA/.test(value)) { // 특정 패턴을 만족하면 A API 호출 return apiService.getA(value); } else { // 그 외에는 B API 호출 return apiService.getB(value); } }) ).subscribe(result => { // result 는 항상 배열 형태일 것으로 예상 console.log(result); }); ``` - `inputObservable`은 사용자의 입력이나 어떤 이벤트를 나타낸다. - `switchMap` 내부에서 조건부 분기문으로 어떤 Observable을 반환할지 결정한다. - 각 분기에서 반환하는 Observable은 모두 같은 타입(예를 들어 배열)을 반환한다는 점이 중요하다. - `switchMap`은 새로운 값으로 전환될 때 기존에 구독 중이던 API 호출을 취소하기 때문에, 네트워크 호출이 중복되는 에러를 줄이는 데 유용하다. --- 주의점 및 팁 1. 반환 Observable 타입 통일 : 모든 조건문이 반환하는 Observable이 비슷한 데이터 타입을 반환하도록 설계해야 구독자 쪽에서 처리하기 쉽다. 예를 들어 일부 조건은 HTTP 요청, 다른 조건은 `of([])`처럼 즉시 끝나는 Observable을 반환해도 괜찮다. 2. 에러 처리 : HTTP 요청 중 발생할 수 있는 에러를 적절히 처리해야 한다. `catchError`를 적절히 사용해 특정 요청 실패 시에도 전체 스트림이 종료되지 않도록 설계한다. 3. 조건 분기 복잡도 관리 : 조건이 많거나 복잡할 경우, 조건 분기 로직을 별도의 함수로 분리하여 가독성을 유지하는 것이 좋다. 4. 취소 효과 : `switchMap`은 새로운 값이 들어오면 기존에 실행하던 내부 Observable을 자동으로 취소(unsubscribe) 한다는 점 때문에, 여러 빠른 입력 변화에 대해 네트워크 부하를 줄일 수 있다. --- 정리 `switchMap`을 활용해 여러 조건부 요청을 처리하려면, `switchMap` 내부 콜백 함수 안에서 조건문을 활용하여 상황에 맞는 Observable을 반환하면 된다. 이때 반환하는 Observable은 HTTP 요청뿐 아니라, 바로 값을 반환하는 Observable(`of()`, `EMPTY`) 등도 될 수 있다. `switchMap`의 기존 구독 취소 특성 덕분에, 빠르게 바뀌는 입력값이나 여러 조건에 따른 요청 로직을 깔끔하고 효율적으로 다룰 수 있다. --- 필요하다면 더 구체적인 예제나 상황에 맞춘 코딩 패턴에 대해서도 추가 설명해 드릴 수 있습니다.
이용안내
커뮤니티 이용안내
×
- 게시한 게시글로 발생하는 문제는 게시자에게 책임이 있습니다.
- 게시글이 타인/타업체의 저작권을 침해할 경우 모든 책임은 게시자에게 있습니다. 게시자가 모든 손해를 부담해야 합니다.
- 상식닷컴 운영자는 게시자와 상의하지 않고 게시글을 수정 또는 삭제할 수 있습니다.
- 상식닷컴 운영자는 깨끗한 커뮤니티 공간을 만드는 것이 1순위입니다.
수정하기
취소하기