RxJS는 무엇인가?
일단 RxJs가 무엇인지를 설명하기에 앞서 두 가지 용어를 먼저 이해할 필요가 있다.
- Reactive Programming (RP)
- Functional Reactive Programming (FRP)
- Reactive Extensions (Rx)
Reactive Programming (RP)
Reactive programming is programming with asynchronous data streams
리액티브 프로그래밍은 비동기적 데이터 흐름을 처리하는 프로그래밍이다. 즉, 핵심은 모든 것을 비동기적인 데이터의 스트림으로 간주하고 , 옵저버(Observer) 디자인 패턴을 활용해서 비동기 이벤트를 처리하는 것이다.
Async와 Observer
비동기(Asynchronous) 이벤트는 다양한 작업들이 수행되는 동시에 어떠한 작업이 비동기적으로 완료되는 것을 말한다. 웹이나 앱에서 발생하는 비동기적인 이벤트의 종류는 굉장히 다양한 편이다. 예를 들면, 유저가 앱에 로그인, 이미지 조회, 비밀번호 변경 같이 유저의 인터페이스를 방해하지 않고 뒷단에서 데이터를 가져오는 작업들을 비동기적인 작업이라고 표현할 수 있다.
데이터 스트림(Stream)이란 시간에 따라 정렬된 진행 중인 이벤트 흐름이다. Async한 데이터 스트림을 아래처럼 표현 할 수 있다.
Reactive Programming은 유저가 이벤트를 발생시킬 때 마다 바로 반응하기 위해 항상 유저의 이벤트를 관찰(Observe)해야하고 값이 변할때마다 데이터 스트림에 그 값을 넣어준다. 이러한 관찰 패턴을 Observer 디자인 패턴이라고 부른다.
Functional Reactive Programming(FRP)
Functional reactive programming is a programming paradigm for reactive programming using the building blocks of functional programming
Functional Reactive Programming을 간단하게 말하자면 앞서 배운 RP의 개념을 함수형프로그래밍을 사용해 구현하는 것을 말한다. 아래 배열의 공백을 삭제하고 모든 알파벳을 대문자로 바꾸는 프로그램을 예제로 보겠다.
명령형 프로그래밍
const log = o => console.log(o);
const words = ["car ", " plain ", " table"];
const processedWords = [];
for (let i = 0; i < words.length; i++){
processedWords.push(words[i].trim().toUpperCase());
}
log(processedWords);함수형 프로그래밍
const log = o => console.log(o);
const words = ["car ", " plain ", " table"];
const pipeAll = (...fns) => x => fns.reduce((v,fn)=> fn(v), x);
const trim = str => str.trim();
const toUpperCase = str => str.toUpperCase();
const trimAndUpperCase = pipeAll(trim, toUpperCase);
const processedWords = words.map(trimAndUpperCase);
log(processedWords)위에 코드를 보면 명령형 프로그래밍 코드가 좀 더 짧고 간결해 보일 수 있다. 하지만 함수형 프로그래밍은 가독성 면에서 뛰어나고 또한 만들어 놓은 함수들을 재사용할 수 있다는 장점이 있다. 이러한 장점을 가진 함수형 프로그래밍을 RP와 함께 사용하게 되면 더욱 더 강력한 도구가 될 수 있다.
Reactive Extensions (Rx)
An API for asynchronous programming with obervable streams
Reactive Extenstions는 한마디로 말해 관측 가능한 스트림을 이용한 비동기 프로그래밍 용 API이다. 즉, Rx는 앞에서 설명한 RP 나 FRP 같은 프로그래밍 패러다임이 아닌 API이다.
Rx는 RP의 비동기 데이터 스트림을 활용해 지속적으로 관찰하고 변화에 따른 동작을 수행하는데 그치지 않고 debounce, throttling 같은 함수를 이용할 수 있다.
참고
