[Javacscript] Reactive X 기본편 ( feat. RxJS )

척척 프로그래밍, 인프준

 

 

 

 

 

 

 

 

 

 

들어가며

ReactiveX는 비동기 및 이벤트 기반 프로그래밍을 위한 라이브러리로, 다양한 언어에서 사용 가능한 프로그래밍 패러다임을 제공합니다. 이는 주로 데이터 스트림 및 시퀀스를 다루는데 특화되어 있으며, 효과적인 비동기 코드 작성을 도와줍니다. 이번 글에서는 JavaScript를 중심으로 ReactiveX의 핵심 개념, 활용 예제, 그리고 장단점을 알아보겠습니다.

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

주요 특징

 

1) Observable 및 Observer 패턴

ReactiveX의 핵심은 Observable과 Observer 패턴입니다. Observable은 데이터 스트림을 생성하고, Observer는 해당 스트림의 변화를 감지하고 처리합니다. 예를 들어, 사용자의 클릭 이벤트나 HTTP 요청과 같은 이벤트를 Observable로 만들어 이를 감시하는 Observer를 등록하면, 이벤트가 발생할 때마다 Observer에서 정의한 동작이 실행됩니다.

 

 

// 예제: 클릭 이벤트를 Observable로 만들어 처리하기
const button = document.getElementById('myButton');
const clickStream = Rx.Observable.fromEvent(button, 'click');

clickStream.subscribe(() => {
  console.log('Button Clicked!');
});

 

 

 

 

 

 

 

2) 연산자 (Operators)

ReactiveX는 다양한 연산자를 제공하여 데이터 스트림을 가공하고 조작할 수 있습니다. 맵핑, 필터링, 병합 등 다양한 연산자를 활용하여 데이터 스트림을 다룰 수 있습니다.

 

 

// 예제: 맵핑 연산자를 사용하여 데이터 가공하기
const numberStream = Rx.Observable.of(1, 2, 3, 4, 5);

const squaredStream = numberStream
  .map(num => num * num)
  .subscribe(result => {
    console.log(result); // 1, 4, 9, 16, 25
  });

 

 

 

 

 

 

 

3) 비동기 작업 처리

ReactiveX는 비동기 작업을 간편하게 처리할 수 있는 강력한 도구입니다. AJAX 호출이나 타이머 등의 비동기 작업을 Observable로 래핑하고, 여러 Observable을 조합하여 복잡한 비동기 흐름을 간단하게 표현할 수 있습니다.

 

// 예제: 비동기 작업을 Observable로 다루기
const fetchData = Rx.Observable.create(observer => {
  setTimeout(() => {
    observer.next('Data Received!');
    observer.complete();
  }, 2000);
});

fetchData.subscribe(data => {
  console.log(data); // Data Received! (2초 후 출력)
});

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

장점과 단점

장점

1. 비동기 코드 간소화

Observable을 통해 비동기 코드를 간결하게 작성할 수 있습니다.

 

2. 컴포저블

다양한 연산자를 조합하여 복잡한 데이터 처리 흐름을 쉽게 구성할 수 있습니다.

 

3. 다양한 언어 지원

ReactiveX는 Java, JavaScript, Swift 등 다양한 언어에서 사용 가능합니다.

 

 

 

 

단점

1. 러닝 커브

처음에는 Observable 및 연산자 등의 개념을 익히는 데 시간이 걸릴 수 있습니다.

 

2. 오버헤드

작은 규모의 프로젝트나 간단한 상황에서는 ReactiveX 도입이 과도할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

마치며

ReactiveX는 비동기 프로그래밍을 효과적으로 다룰 수 있는 강력한 도구로, Observable과 연산자를 통해 데이터 흐름을 명확하게 표현할 수 있습니다. 그러나 학습 곡선과 오버헤드를 고려해야 하며, 프로젝트의 규모와 특성에 맞게 적절히 도입해야 합니다. 종합적으로, ReactiveX는 적절한 상황에서 프로그래밍 경험을 향상시키고 유지보수성을 향상시킬 수 있는 강력한 도구임을 기억해야 합니다.