React에 rxjs를 곁들여 사용해보자

아주 간단히 rxjs를 사용해서, 숫자를 출력하는 react app을 만들어보았습니다.

cleanup에서 unsubscribe하는 것이 매우 중요합니다.

import React, { useEffect, useState } from "react";
import { interval } from "rxjs";
import { take, tap } from "rxjs/operators";
import "./App.css";

const obsv$ = interval(1000).pipe(tap(console.log), take(5));

function App() {
  const [state, setState] = useState(0);

  useEffect(() => {
    const sub = obsv$.subscribe({
      next: (v) => setState((v) => v + 1),
      complete: () => console.log("done!"),
    });

    return () => sub.unsubscribe();
  }, []);

  return (
    <>
      <h3>Alarm Clock</h3>
      <div className="display">{state}</div>
    </>
  );
}

export default App;

 

* 컴포넌트와 rxjs 코드가 섞여 있는 것은 간단한 경우 가독성이 좋으나, 로직이 복잡해질 경우에는 컴포넌트를 이해하는데 좋지 않습니다.

따라서, 별도의 service 폴더를 생성해서 obsv와 obv를 별도로 관리하는 경우도 많습니다.

 

보통 아래처럼 사용합니다.

해외 사례를 참고해봤는데 아래처럼 사용하곤 합니다.

 

import { Subject } from 'rxjs';

const subject$ = new Subject();

// 해당 subject를 조작하는 함수들을 마음대로 만들어주면 됩니다.
export const messageService = {
    sendMessage: message => subject$.next({ text: message }),
    clearMessages: () => subject$.next(),
    onMessage: () => subject$.asObservable(),
};

 

 

그런데 asObservable은 왜 사용할까요?

 

Subject는 observable과 observer 두 가지로 동시에 작동합니다.

그런데 여기에 asObservable을 사용하면 observer로서 작동하는 것을 막을 수 있습니다.

Creates a new Observable with this Subject as the source. You can do this to create customize Observer-side logic of the Subject and conceal it from code that uses the Observable. - 공식 문서

 

 

rxjs와 react를 잘 결합한 코드 예시들

전부 service 폴더를 만들어서 별도로 관리함. 방식이 동일하니까 잘 눈여겨보고 다음 프로젝트에서 응용해보자!

 

모범적인 사례인듯.

jasonwatmore.com/post/2020/04/21/react-hooks-rxjs-communicating-between-components-with-observable-subject

 

실제로 구동되는 rxjs-todo 프로젝트들.

github.com/WillowRyu/ReactWIthRxjs => 설명 alexband.tistory.com/57

github.com/black7375/React-RxJS-Todo => 설명 black7375.tistory.com/75

 

 

hook으로 wrap하기

 

obsv를 생성하고 메서드를 실행하는 건 많은 컴포넌트에서 반복적으로 사용될 것이므로, 훅으로 대체하여 좀 더 간결하게 사용할 수 있을 것 같습니다. 특정 라이브러리가 우위를 쥐고 있는 상태는 아니기 때문에, 코드만 참고해보고, 직접 프로젝트에서 사용해보는 건 지양하도록 합시다.

 

github.com/LeetCode-OpenSource/rxjs-hooks#useeventcallback => useObservable, useEventCallback 딱 2개만 존재

observable-hooks.js.org/ => useObservable, useObservableState, pluckFirst, useSubscription 등 꽤나 많은데, 굳이...

 

일단 위 두 오픈 소스를 확인해보고 어떤 식으로 구현이 되어 있는지 살펴보는 방식으로 자신만의 추상화된 훅을 제작할 수 있을 겁니다. 

useObservable 훅 정도만 구현해도 좋을듯...