RxJs 기본, Subject와 BehaviorSubject 그리고 Observable

 

 

Rxjs는 데이터의 변화를 감시자를 만들어 바라보게 하다가 데이터가 변하는 순간 사용자가 입력 한 행동을 하도록 구성된, 소위 반응형 방식으로 구성되어 있다.

데이터가 변하면 특정 행동을 하도록 만든다.

기본적인 관측은 Subject를 활용하여 간단하게 구현 할 수 있다.

import { Subject } from 'rxjs';

const sub = new Subject();
sub.next(1);
var a = sub.subscribe(console.log);  //a 감시자, 지나간 1에 대해서는 행동을 하지 않음
sub.next(2); // a에서 2 출력
var b = sub.subscribe(console.log);  //b 감시자, 지나간 2에 대해서는 행동하지 않음
sub.next(3); //a와 b에서 3출력

위 예제를 보면, Subject라는 객체를 활용하여 반응형 기능을 구현하였다.

해당 예제에서는 subscribe 함수는 관측, 감시의 기능으로 Subject객체가 관측중인 데이터가 변동이 되면 console.log를 찍도록 되어 있다. Subject에서 next함수는 변동된 데이터를 전달하는 기능이다.

즉, 데이터가 변동되면 콜백행위로 지정 해 놓은 행동이 알아서 스스로 동작하는 것 이다.

비슷한 기능을 지닌 BehavicorSubject를 활용한 아래 코드를 보자.

import { BehaviorSubject } from 'rxjs';

const subject = new BehaviorSubject(123);

var a = subject.subscribe(console.log);  //a 감시자, subscribe를 통해 콜백 행동  
var b = subject.subscribe(console.log);  //b 감시자, subscribe를 통해 콜백 행동
subject.next(456);   //감시중인 a, b에서 456 2번출력
var c = subject.subscribe(console.log);  //새로운 c 감시자, 저장된 데이터인 456 출력
subject.next(789);  //a, b, c가 각각 1번씩 출력

마찬가지로 subscribe 함수는 관측, 감시의 기능으로 BehaviorSubject객체가 관측중인 데이터가 변동이 되면 console.log를 찍도록 되어 있다.

대신 BehaviorSubject는 지나간 행위도 구독할 수 가 있다.

 

Observable을 활용하는 방법이다.

import {Observable} from 'rxjs';
var array = [0];
var observe : Observable<any> = new Observable((obj)=>{  //대상 생성
  var num = 1;
  var inter = setInterval(()=>{
    array.push(num++);
    obj.next(array);  //데이터 변동
    if(num > 5){
      clearInterval(inter);
    }
  },200 * 1)
});    


observe.subscribe((result)=>{  //감시자, 구독자의 콜백 행위
  console.log(result);
});

Subject를 활용한 방법과 별 반 차이가 거의 없다. 마찬가지로 subscribe를 활용해서 콜백행위를 지정하여 주면 된다.

이와같이 데이터가 변동되면 무엇을 해라라고 사용자가 1번만 정의를 내리고, 나머지 이후의 데이터가 변동되는 행위에 대한 행동을 맏기는 행위, 이것을 반응형이라고 한다.