핵심적인 RxJS 연산자와 평탄화(flattening) 연산자는 무엇인가요?

Question

Accepted Answer

**RxJS 연산자**는 Observable 스트림을 변환하고, 필터링하고, 결합합니다. 가장 중요하면서도 가장 혼동되는 것은 Observable의 Observable(예: 다른 스트림의 각 방출마다 트리거되는 HTTP 호출)을 처리하는 네 가지 **평탄화 연산자**입니다.

## 일반적인 변환/필터 연산자

```ts
import { map, filter, tap, debounceTime, distinctUntilChanged, catchError } from "rxjs/operators";

source$.pipe(
  map(x => x * 2),                 // 각 값을 변환
  filter(x => x > 10),             // 테스트를 통과하는 값을 유지
  tap(x => console.log(x)),        // 부수 효과, 스트림을 변경하지 않음
  debounceTime(300),               // 방출 전에 멈춤을 대기 (검색 입력)
  distinctUntilChanged(),          // 연속된 중복을 무시
);
```

## 네 가지 평탄화 연산자 (까다로운 부분)

소스의 각 값이 **다른** Observable(HTTP 요청 같은)을 트리거해야 할 때, 내부 Observable을 "평탄화"해야 합니다. 네 가지는 **겹침을 처리하는 방식**이 다릅니다.

```text
switchMap   → 새 값이 도착하면 이전 내부 Observable을 취소
mergeMap    → 모든 내부 Observable을 동시에 실행 (취소 없음)
concatMap   → 큐에 넣어 순서대로 하나씩 실행
exhaustMap  → 내부 Observable이 아직 실행 중이면 새 값을 무시
```

## 각각을 언제 사용하는가

```ts
// switchMap — 타입어헤드 검색: 사용자가 다시 입력하면 오래된 요청을 취소
this.searchInput.valueChanges.pipe(
  debounceTime(300),
  switchMap(query => this.api.search(query)) // 오직 최신 쿼리의 결과만 중요
).subscribe(results => this.results = results);

// mergeMap — 독립적인 요청을 병렬로 발생 (순서가 중요하지 않음)
from(ids).pipe(mergeMap(id => this.api.get(id)));

// concatMap — 반드시 순서대로 실행되어야 하는 작업 (예: 순차적 저장)
actions$.pipe(concatMap(action => this.api.save(action)));

// exhaustMap — 로그인이 진행 중인 동안 반복 클릭을 무시
this.loginClick$.pipe(exhaustMap(() => this.auth.login())); // 연타 클릭 무시
```

## 기억법

```text
switchMap  = "새 것으로 전환" (이전 취소)       → 검색
mergeMap   = "모두 병합" (병렬)               → 독립적인 요청
concatMap  = "연결" (순차)                    → 순서 있는 작업
exhaustMap = "현재 것을 먼저 소진" (새 것 무시) → 이중 제출 방지
```

## 왜 중요한가

평탄화 연산자는 Angular에서 가장 중요하면서도 가장 흔히 잘못 사용되는 RxJS 도구에 속합니다.

잘못 선택하면 실제 버그가 발생합니다. 검색에 `mergeMap`을 쓰면 오래된 결과가 표시되고(취소 없음), 순차적 저장에 `switchMap`을 쓰면 실행 도중 취소됩니다.

`switchMap`이 취소하고(검색에 이상적), `concatMap`이 순서를 지키고, `mergeMap`이 병렬화하며, `exhaustMap`이 중복을 차단한다는 것을 아는 것은 RxJS를 많이 쓰는 모든 Angular 코드에서 올바른 비동기 처리에 필수적입니다.