Rxjs Observable

RxJS(Reactive Extensions for JavaScript)는 자바스크립트를 위한 리액티브 프로그래밍 라이브러리입니다. RxJS는 Observable 시퀀스를 사용하여 비동기 데이터 스트림을 다루고, 이를 통해 데이터 처리와 조작을 효율적으로 할 수 있습니다. Observable은 데이터 소스로부터 연속적인 데이터 아이템들을 전달받을 수 있는 객체입니다. 이제 Observable의 주요 메서드인 filter, map, switchMap에 대해 상세하게 설명하고 코드 예시를 제공하겠습니다.

1. filter:
filter 메서드는 Observable 시퀀스의 데이터를 필터링하는 데 사용됩니다. 지정된 조건에 따라 데이터를 걸러내고, 조건을 만족하는 데이터만을 내보냅니다.

const { from } = rxjs;
const { filter } = rxjs.operators;

// 1부터 10까지의 숫자를 가진 Observable 생성
const source = from([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

// 짝수만 필터링하는 Observable 생성
const evenNumbers = source.pipe(filter(num => num % 2 === 0));

evenNumbers.subscribe(num => console.log(num));
// 출력: 2, 4, 6, 8, 10

위의 예시에서 filter 메서드는 source Observable에서 짝수만을 걸러내는 새로운 Observable인 evenNumbers를 생성합니다. evenNumbers를 구독하면 짝수만을 출력하게 됩니다.

2. map:
map 메서드는 Observable 시퀀스의 각 데이터를 변형하는 데 사용됩니다. 데이터를 하나씩 가져와서 변형한 후, 변형된 데이터를 새로운 Observable로 내보냅니다.

const { from } = rxjs;
const { map } = rxjs.operators;

// 1부터 5까지의 숫자를 가진 Observable 생성
const source = from([1, 2, 3, 4, 5]);

// 각 숫자를 제곱하여 변형하는 Observable 생성
const squaredNumbers = source.pipe(map(num => num * num));

squaredNumbers.subscribe(num => console.log(num));
// 출력: 1, 4, 9, 16, 25

위의 예시에서 map 메서드는 source Observable에서 각 숫자를 제곱하여 새로운 Observable인 squaredNumbers를 생성합니다. squaredNumbers를 구독하면 각 숫자의 제곱값이 출력됩니다.

3. switchMap:
switchMap 메서드는 Observable 시퀀스를 다른 Observable로 변환하는 데 사용됩니다. 변환된 Observable을 구독하고, 가장 최근의 변환된 Observable만을 내보냅니다. 이전에 발생한 Observable의 결과는 무

시됩니다.

const { fromEvent } = rxjs;
const { switchMap } = rxjs.operators;

// 버튼 클릭 이벤트를 감지하는 Observable 생성
const buttonClicks = fromEvent(document.getElementById('myButton'), 'click');

// 클릭 이벤트를 받아 타이머 Observable로 변환하는 Observable 생성
const timerOnClick = buttonClicks.pipe(
  switchMap(() => {
    return interval(1000); // 1초마다 값을 내보내는 Observable
  })
);

timerOnClick.subscribe(value => console.log(value));
// 버튼 클릭 시 0, 1, 2, 3, ... 순서로 출력

위의 예시에서 switchMap 메서드는 buttonClicks Observable에서 버튼 클릭 이벤트를 받으면, 새로운 타이머 Observable인 interval(1000)으로 변환합니다. 이후, 변환된 Observable을 구독하면 1초마다 값을 출력합니다. 버튼을 클릭할 때마다 이전에 생성된 타이머 Observable은 취소되고, 새로운 타이머 Observable이 생성되어 최신 값을 내보냅니다.

이것은 filter, map, switchMap 메서드의 간단한 설명과 예시입니다. RxJS는 이 외에도 다양한 연산자와 메서드를 제공하여 Observable의 데이터 조작과 처리를 유연하게 할 수 있습니다.