RxJs를 쓰는 이유가 뭘까?

이직을 하면서 앵귤러 프로젝트에 참여하게 되었다.

앵귤러는 RxJs를 사용하여 비동기 처리를 하는데, 리액트의 useEffect와 유사하다고 느꼈다.

어떤 점이 유사할까?

---

RxJs는 한마디로 옵저버 패턴이다.

옵저버는 특정 객체의 상태변화를 관찰하고 (구독)

객체에 상태변화가 있을때마다, 객체가 옵저버에게 자동 전파한다.

 

객체를 관찰 중인 옵저버들

객체의 상태변화는 Observable이라는 형태로 전달된다.

(상태변화 ex: 비동기 통신, 이벤트 처리, 타이머 등)

 

RxJs의 장점은 여기서 나온다.

- 모든 상태변화가 Observable이라는 형태로 통일되기 때문에, 일관적인 프로그래밍이 가능하다.

- 또한 Observable은 immutable(변경불가)이므로 더 안전하다.

---

상태변화를 구독하면 데이터 스트림을 결과값으로 얻게 된다.

아래는 ajax 통신하는 예시이다.

users를 구독하여 받은 결과를 -> map을 돌려서 새로운 형태로 만들고 -> 콘솔에 찍는다.

 

const users = axios.get('https://api.github.com/users');
const users$ = from(users);

users$
    .pipe(
        map(response => ({ type: 'RESPONSE_RECEIVED', payload: response.data}))
    )
    .subscribe(console.log);

 

여기서 RxJs의 장점 하나 더!

- Observable은 map, filter, reduce와 같은 다양한 operator를 제공한다.

- 데이터 스트림을 그대로 인자로 받기 때문에, 중간에 다른 인자가 추가되거나 제거되지 않으므로 더 안전하다.

---

RxJs는 그 원리만 이해하면 더 쉽고 안전하게 데이터를 처리할 수 있다.

꼭 앵귤러와 사용해야 하는 것은 아니다. Facebook은 리액트와 RxJs를 함께 사용하고 있다고 한다.

앞으로 새 프로젝트에 RxJs를 도입해보는 것은 어떨까?