Reactive X의 3가지 핵심요소

Reactive X가 어떻게 동작하는지 알기 위해, 세 가지 핵심 요소를 이해하는게 필요

1. Observable

옵저버블은 리액티브 프로그래밍에서 가장 기본적인 개념.

옵저버블은 일련의 이벤트나 데이터를 스트림 형태로 발행하는 역할을 함.

→ 사용자가 마우스를 클릭할 때마다 이벤트를 발생시키거나, 네트워크 응답이 도착할 때마다 값을 발행하는 등 다양한 방식으로 데이터를 생성

옵저버블은 이벤트 스트림을 통해 데이터가 연속적으로 발생하는 방식으로 동작.

데이터는 실시간으로 발생하거나 시간이 지나면서 누적될 수 있으며,

이러한 데이터는 옵저버(Observer)가 이를 구독(subscribe)하고 처리함


const observable = Rx.Observable.range(1, 10);

→ 1부터 10까지의 값을 순차적으로 발행하는 옵저버블을 생성

2. 오퍼레이터(Operators)

옵저버블로부터 발행된 데이터는 "오퍼레이터"라는 연산자를 통해 변환되거나 필터링됨.

오퍼레이터는 스트림을 변형하고 처리하는 함수들로, 데이터의 흐름을 조작하여 원하는 형태로 변환할 수 있음.

대표적 오퍼레이터

filter: 특정 조건에 맞는 데이터만 걸러냄

map: 데이터를 변환(예: 숫자를 제곱하거나 문자열을 대문자로 변환).

take: 특정 개수의 데이터만 발행.

이 오퍼레이터들은 모두 순수 함수로 동작함.

→ 외부 상태를 변경하지 않고 입력된 데이터를 변환하여 새로운 값을 반환하는 방식.


observable
  .filter(x => x % 2 === 0) // 짝수만 걸러내기
  .map(x => x * x)          // 각 값을 제곱
  .take(5)                  // 처음 5개 값만 취함
  .subscribe(console.log);   // 결과를 출력

이 코드에서는 짝수만 골라내고, 그 값들을 제곱한 뒤, 처음 5개 값만 처리

3. 옵저버(Observer)

옵저버는 옵저버블에서 발행된 데이터를 구독하고, 이를 처리하는 역할을 함.

옵저버는 옵저버블에서 발행되는 데이터에 반응하는 코드로, 데이터를 실시간으로 처리하거나, 어떤 작업을 수행하도록 설계됨.

데이터를 수신할 뿐만 아니라, 스트림이 완료되거나 오류가 발생할 때에도 반응할 수 있음.

→ 데이터 처리 도중 네트워크 오류가 발생하면 옵저버는 오류 핸들러를 통해 이를 처리할 수 있음.


const observer = {
  next: value => console.log(value), // 값이 발행될 때 실행
  error: err => console.error(err),  // 오류가 발생할 때 실행
  complete: () => console.log('완료') // 스트림이 종료될 때 실행
};

observable.subscribe(observer);

→ 이 옵저버는

발행된 값을 출력,

오류가 발생하면 이를 로그로 기록,

데이터 스트림이 완료되면 "완료" 메시지를 출력함.

시간의 흐름 다루기

리액티브 프로그래밍의 핵심 개념 중 하나는 시간의 흐름을 스트림으로 다룰 수 있다는 점.

리액티브X에서는 시간의 흐름을 처리하는 다양한 오퍼레이터를 제공하는데, interval 오퍼레이터는 일정한 시간 간격으로 값을 발행함.

예시:


const interval$ = Rx.Observable.interval(1000); // 1초마다 값을 발행
interval$
  .take(5) // 처음 5개 값만 취함
  .subscribe(console.log);

비동기 작업 처리

리액티브 프로그래밍의 큰 장점 중 하나는 비동기 작업을 스트림처럼 다룰 수 있다는 점.

→ 네트워크 요청의 결과를 옵저버블로 처리하면, 여러 요청을 동시에 처리하면서도 코드의 가독성을 유지할 수 있음.

동시에 요청을 제한하거나, 오류가 발생했을 때 재시도하는 등의 작업도 손쉽게 구현가능


const ajax$ = Rx.Observable.ajax.getJSON('https://api.example.com/data');
ajax$
  .retry(3) // 오류 발생 시 최대 3번 재시도
  .subscribe(
    data => console.log(data),
    error => console.error('에러:', error),
    () => console.log('완료')
  );

API 요청을 보내고,

오류가 발생하면 최대 3번까지 재시도.

네트워크 요청이 성공하면 데이터를 출력하고, 요청 완료되면 "완료" 메시지 출력

옵저버블: 이벤트나 데이터를 스트림으로 발행하는 객체

오퍼레이터: 스트림에서 발행된 데이터를 변형하거나 필터링하는 함수

옵저버: 옵저버블에서 발행된 데이터를 구독하고 처리하는 객체