[React] Observable 와 Hot & Cold 학습

🖋️ Observable 와 Hot & Cold

• Observable은 비동기 프로그래밍을 위한 패턴
• 주로 ReactiveX 라이브러리에서 사용되며, 이벤트 스트림을 처리하는데 유용
• JavaScript에서 Observable은 주로 RxJS 라이브러리를 통해 사용

• Observable

  • 데이터의 스트림을 나타내며, 시간에 따라 발생하는 값의 순차적인 흐름을 나타냄

• Hot Observable

  • 데이터의 스트림이 이미 발생하고 있는 경우
  • 구독자가 언제 구독하든 이미 진행 중인 스트림을 받음

• Cold Observable

  • 구독이 이루어지는 순간부터 데이터의 스트림이 시작

• Observable 사용 예시

import { Observable } from 'rxjs';

// Cold Observable 생성
const coldObservable = new Observable(subscriber => {
  subscriber.next(Math.random()); // 새로운 구독자마다 다른 값 방출
  subscriber.complete();
});

coldObservable.subscribe(value => console.log(`Cold Observable: ${value}`));
coldObservable.subscribe(value => console.log(`Cold Observable: ${value}`));

// Hot Observable 생성
const hotObservable = new Observable(subscriber => {
  const value = Math.random();
  subscriber.next(value); // 같은 값을 모든 구독자에게 방출
  subscriber.complete();
});

const sharedObservable = hotObservable.pipe(share());

sharedObservable.subscribe(value => console.log(`Hot Observable: ${value}`));
sharedObservable.subscribe(value => console.log(`Hot Observable: ${value}`));

• 언제 사용하는지

  • 상태 관리
    • 애플리케이션의 상태가 여러 컴포넌트에 걸쳐 있거나,
      상태가 자주 변경될 때 사용
  • 비동기 데이터 처리
    • AJAX 요청, WebSocket, 타이머와 같은 비동기 작업을 처리할 때 유용
  • 이벤트 스트림
    • 사용자 입력, 애니메이션, 기타 이벤트를 처리할 때 사용

• 최적화 방법

  • debounceTime, throttleTime: 이벤트 발생 빈도를 줄임
  • distinctUntilChanged: 이전과 동일한 값을 무시
  • switchMap: 이전의 스트림을 취소하고 새로운 스트림을 구독

• AJAX 요청 처리

import { from } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { map, catchError } from 'rxjs/operators';

// AJAX 요청을 Observable로 변환
const fetchData = url => from(ajax.getJSON(url)).pipe(
  map(response => response),
  catchError(error => {
    console.error('Error:', error);
    return of({ error: true, message: error.message });
  })
);

// 사용 예시
fetchData('https://api.example.com/data').subscribe(data => {
  console.log('Data:', data);
});

• 상태 관리 예시

import { BehaviorSubject } from 'rxjs';

// 상태를 관리할 BehaviorSubject 생성
const state$ = new BehaviorSubject({ count: 0 });

// 상태를 구독하고 변화에 따라 UI 업데이트
state$.subscribe(state => {
  console.log('State:', state);
  document.getElementById('counter').innerText = state.count;
});

// 상태를 업데이트하는 함수
const increment = () => {
  const currentState = state$.getValue();
  state$.next({ count: currentState.count + 1 });
};

// 버튼 클릭 이벤트와 상태 업데이트 연결
document.getElementById('incrementButton').addEventListener('click', increment);

📰 정리

Observable은 비동기 프로그래밍에서 매우 유용한 도구이며, 특히 이벤트 스트림을 처리하거나 복잡한 상태 관리를 할 때 강력한 기능을 제공합니다. Hot과 Cold Observable의 개념을 이해하고, RxJS와 같은 라이브러리를 통해 다양한 비동기 작업을 쉽게 처리할 수 있습니다. 비동기 프로그래밍을 효과적으로 구현하기 위해 RxJS의 다양한 연산자를 학습하고 적용