RxJS는 Observable 시퀀스를 조작하고 다루는데 사용되는 다양한 연산자를 제공합니다. 이 연산자들을 활용하면 Observable에서 데이터를 필터링하거나 변환하고, 시간 지연을 적용하거나 여러 개의 Observable을 결합하는 등의 다양한 작업을 수행할 수 있습니다. 이번에는 몇 가지 주요 RxJS 연산자에 대해 살펴보겠습니다.

1. 필터링 연산자

Observable에서 특정 조건을 만족하는 데이터만을 걸러내는데 사용되는 필터링 연산자들이 있습니다.

• filter: 주어진 조건에 맞는 데이터만을 내보냅니다.
• take: 지정된 수의 데이터만을 내보냅니다.
• takeUntil: 지정된 조건을 만족할 때까지 데이터를 내보냅니다.
• distinctUntilChanged: 연속된 데이터 중 동일한 값이 연속으로 나타나는 경우 두 번째부터는 내보내지 않습니다.

import { of } from 'rxjs';
import { filter, take, takeUntil, distinctUntilChanged } from 'rxjs/operators';

const source = of(1, 2, 2, 3, 3, 3, 4, 5);
source.pipe(
  filter(val => val % 2 === 0),
  take(2),
).subscribe(console.log);

// 출력: 2 2

2. 변환 연산자

Observable에서 데이터를 변환하거나 가공하는 데 사용되는 변환 연산자들이 있습니다.

• map: 각 데이터를 변환하여 새로운 값을 내보냅니다.
• scan: 각 데이터를 누적하여 현재까지의 값들을 내보냅니다.
• pluck: 데이터에서 특정 필드만을 추출하여 내보냅니다.

import { from } from 'rxjs';
import { map, scan, pluck } from 'rxjs/operators';

const source = from([{ name: 'Alice' }, { name: 'Bob' }, { name: 'Charlie' }]);
source.pipe(
  pluck('name'),
  map(name => name.toUpperCase()),
  scan((acc, val) => `${acc}, ${val}`),
).subscribe(console.log);

// 출력: ALICE, BOB, CHARLIE

3. 결합 연산자

여러 개의 Observable을 결합하여 새로운 Observable을 생성하는데 사용되는 결합 연산자들이 있습니다.

• merge: 여러 Observable을 병합하여 하나의 Observable로 만듭니다.
• concat: 여러 Observable을 연결하여 순차적으로 내보냅니다.
• combineLatest: 여러 Observable 중 하나라도 데이터를 내보낼 때마다 최신 값을 조합하여 내보냅니다.

import { interval, merge } from 'rxjs';
import { take } from 'rxjs/operators';

const source1 = interval(1000).pipe(take(3));
const source2 = interval(500).pipe(take(6));

merge(source1, source2).subscribe(console.log);

// 출력: 0 0 1 1 2 0 3 2 1 4 3 5

여기서는 일부만을 다루었지만, RxJS는 이외에도 다양한 연산자들을 제공하고 있습니다. 이러한 연산자들은 Observable을 다룰 때 매우 유용하며, 개발자들은 쉽게 그 활용 방법을 익히고 적용할 수 있습니다.

더 많은 RxJS 연산자와 활용 예제는 RxJS 공식 문서에서 확인할 수 있습니다.