Rxjs?

😢 RXjs?

자바스크립에서 리액트 프로그래밍은 자바스크립트에서는 "동기"로 처리하는 방식(map,array,... 등등) 과 "비동기"로 처리하는 방식(Ajax , 사용자 이벤트 등..) 각각 처리하는 방식이 다르며 순서의 흐름을 찾기가 힘들다.

그리하여 동기,비동기를 하나의 데이터 흐름으로 처리하는게 자바스크립트에서 리액티브 프로그래밍이라고 생각합니다.

 

 

🤩 Rxjs 작동원리

Rxjs에서는 데이터를 방출하는 Observable 과 Obserable를 구독하는 Observer가 존재합니다.

 

Obserable와 Observer

Observable 이 데이터를 방출하면, Observable를 구독하는Observer는 데이터 변화에따라 반응한다라고 생각하면 될것 같습니다.

 

 

😢 Angular 에서 Rxjs 사용해보기

이번에는 코드를 통해 Obserable과 Observer를 알아보도록 하겠습니다.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
// RxJS 임포트
import { Observable } from 'rxjs';
@Component({
  selector: 'app-rxjs',
  templateUrl: './rxjs.component.html',
  styleUrls: ['./rxjs.component.css']
})
export class RxjsComponent implements OnInit {

  constructor(private http: HttpClient) { 
    
  }

  ngOnInit() {
    this.makeObserable();
  }

  makeObserable() {
    //1.옵저버블이 구독될때 호출 되는 함수
    const subscriber = (observer: any) => {
      try {
        //next 함수를 통해 데이터 방출
        observer.next(1);
        observer.next(2);

        //complete 함수를 호출
        observer.complete();
      } catch (error) {
        observer.error(error);
      }
      finally {
        // 구독 해지될 때 호출되는 콜백 함수
        return () => console.log('Unsubscribed!')
      }
    }

    //2.옵져버블 생성
    const observer$ = new Observable(subscriber);


    //3.구독(subscription)
    observer$.subscribe(
      // 옵저버블이 방출한 next 노티피케이션에 반응하는 next 메소드
      value => console.log(value),
      // 옵저버블이 방출한 error 노티피케이션에 반응하는 error 메소드
      error => console.error(error),
      // 옵저버블이 방출한 complete 노티피케이션에 반응하는 complete 메소드
      () => console.log('Complete')
    )

  }

}

 

1.구독함수(subscriber)를 만들고 , 구독함수를 Obserable를 생성합니다.

const subscriber = (observer: any) => {
	try {
     //next 함수를 통해 데이터 방출
     observer.next(1);
     observer.next(2);

     //complete 함수를 호출
     observer.complete();
    } catch (error) {
      observer.error(error);
    }
    finally {
    // 구독 해지될 때 호출되는 콜백 함수
      return () => console.log('Unsubscribed!')
    }
}
//2.옵져버블 생성
const observer$ = new Observable(subscriber);

 

그리하여 아래 같은 그림이 완성됩니다.

Observable 생성

2. 다음으로 Obserable를 구독하는 부분을 보겠습니다.

//3.구독(subscription)
observer$.subscribe(
  // 옵저버블이 방출한 next 노티피케이션에 반응하는 next 메소드
  value => console.log(value),
  // 옵저버블이 방출한 error 노티피케이션에 반응하는 error 메소드
  error => console.error(error),
  // 옵저버블이 방출한 complete 노티피케이션에 반응하는 complete 메소드
  () => console.log('Complete')
)

subscribe를 호출하기 전까지는 절대 데이터를 방출하지 않습니다. 그리하여 꼭 subscribe를 사용해주세요.

subscribe를 호출하면 인제 아래 그림이 완성됩니다.

 

subscribe

위와 같이 인제 subscribe를 통해 데이터를 방출할경우  Observer(next, error, complete)를 통해 데이터의 변경을 감지할 수 있습니다.

 

🧤 다음에는..?

Rxjs를 마우스 이벤트를 통해 사용해보도록 해보겠습니다.