클라이언트의 리액티브 프로그래밍(Reactive programming) - 데이터 바인딩과 Rx

Reactive programming 이란?

---

Reactive programming is a declarative programming paradigm concerned with data streams and the propagation of change. (*출처 위키피디아)
리액티브 프로그래밍은 데이터 스트림과 변화의 전파와 관련된 선언형 프로그래밍 패러다임입니다.

 

프론트엔드에서 리액티브 프로그래밍이라고 하면 데이터 바인딩과 Rx(비동기 처리)가 있습니다.

데이터 바인딩과 Rx가 어떻게 리액티브 프로그래밍 패러다임을 따랐는지 정의에 나와있는대로 스트림, 변화의 전파, 선언형 등에 맞게 설명해보려고 합니다.

 

 

리액티브 프로그래밍의 핵심

---

제가 생각한 리액티브 프로그래밍의 핵심은 이렇습니다.

• Async: 결과를 기다리지 않는 처리 방식
• Stream: 데이터의 흐름. 즉, 데이터가 처리되는 흐름
• Observe: 어떤 대상의 변경을 감지할 수 있도록 감시(구독)하는 것

데이터가 처리되는 흐름(외부에서 받아온다던지, 가공한다던지)을 Stream이라고 생각해본다면

결과를 기다리지 않는 데이터 처리(비동기)에서 결과를 알기 위해 처리 흐름을 감시한다 라고 생각해볼 수 있습니다.

 

또한, Observe 패턴을 통해 변화가 외부로 전파됩니다.

해당 Observer를 구독하고 있으면 변경을 바로 감지하여 반응하게 되므로 변경사항이 전파된다고 할 수 있습니다.

 

 

그렇다면 리액티브 프로그래밍은 실제로 어떻게 적용될까요?

프론트단에서 많이 사용되는 MVVM 패턴에 적용해보겠습니다.

View와 ViewModel은 데이터 바인딩으로, ViewModel과 Data(==Model)레벨은 Rx를 이용할 수 있습니다.

 

*Model이 아니라 데이터로 처리한 이유는 네트워킹, 내부DB 접근, DTO, 비즈니스로직 등등등 프론트 백엔드(?)를 통칭하기 위해서입니다! MVVM은 사실 View에 대한 논의니까요 ㅎㅎ

 

 

Data Binding

---

데이터 바인딩이란 간단히 말해서 화면(View)과 데이터(Data)를 연동시켜주는 겁니다.

보통 ViewModel에서 내부 변수를 변경시키면

그 변수를 구독하고 있던 View가 자동으로 업데이트되는 방식입니다.

상태관리(State management)라고도 많이 불리는 영역이죠!

주로 선언형 UI 프레임워크에서 많이 사용됩니다.

이게 어떻게 리액티브 프로그래밍인지 알아보겠습니다.

 

어떤 버튼을 클릭했을 때 UI는 멈추지 않습니다.

Action이 발생했다는 것만 ViewModel에 전달한 후 다음 Action을 기다립니다.

그리고 ViewModel의 데이터가 변경되었으면 이를 감지합니다.

즉 UI가 기다리지 않으니 비동기이고, 요청이 시작된 시점부터 변경이 완료된 시점이 Stream이며

이 Stream을 구독하여 UI를 다시 그리는 것이므로

DataBinding 또한 Reactive Programming 패러다임의 일부입니다.

 

비동기 처리

---

ViewModel과 Data(Model) 사이의 리액티브 프로그래밍은

일반적으로 생각하는 비동기 네트워킹, 콜백 처리를 더 편하게 해준다는 개념입니다.

 

ViewModel은 데이터를 비동기적으로 요청하고 결과를 기다리지 않습니다.

이때 데이터를 요청하고 응답받기까지를 Stream이라고 하고,

이 Stream의 상태를 옵저빙합니다.

사실 단순히 요청을 주고받는 과정 뿐 아니라 그 주변의 다양한 과정까지 Stream이라고 볼 수 있는데 아래에서 더 알아보겠습니다.

일반적으로 call back 함수를 넘겨 처리하는 것보다 Reactive 방식을 사용하면 다음과 같은 장점이 있습니다.

 

1. 연속적인 비동기처리

보통 콜백 지옥이라고 불리는 현상을 피할 수 있습니다. 이벤트 처리 순서가 중요한 작업일 때 callback 안에 다시 비동기 로직을 넣는 것을 콜백 지옥이라고 하는데요, 여러 비동기 스트림을 연결하는 방식으로 손쉽게 연속적인 비동기를 처리할 수 있습니다.

이렇게 여러 비동기 처리가 있을 때, 각각 스트림을 연결하는 방식으로 순서를 정해 새로운 스트림을 형성할 수 있고

이에 대해 에러, 완료 등 상태를 옵저빙해 처리할 수 있게 되므로 콜백 지옥에 빠질일이 없습니다.

 

2. 중도 취소

연속적인 비동기처리만을 위해서라면 async await 라는 대안도 있습니다.

그러나 스트림이 가진 또 하나의 강점은 중도 취소, 처리입니다. 

 

일반적인 경우, 비동기 요청이 진행되는 동안은 컨트롤할 수 없고 응답까지 완료된 후 성공, 오류만 받아볼 수 있습니다.

또한 취소작업을 하기 위해서는 작업큐에 접근해서 비동기 블럭을 지워주어야합니다. (메소드로 제공될 수도 있긴하지만요)

 

그러나 스트림 형태라면, 스트림을 없애버리면 됩니다.

응답이 오고 처리가 완료되기 전에 흐름이 사라지면 외부적으로는 아무일도 일어나지 않겠죠!

연속된 처리를 할 땐 더욱더 유용할 것 같습니다.

 

 

3. 선언형(함수형) 프로그래밍

리액티브 프로그래밍의 특징 중 하나인 선언형이 여기서도 적용됩니다.

map, filter 등의 고차함수를 이용해서 선언적으로 스트림을 작성할 수 있습니다.

// 1. 일반적인 방법
// 비동기 1
for (url in firstURLs) {
  secondURLs.add(URLRequest(url))
}
// 비동기 2
for (url in secondURLs) {
  URLRequest(url)
  ...
}

// 2. 함수형 프로그래밍
firstURLs.map{ URLRequest($0) }.map{ URLRequest($0) }

이렇듯 함수형 오퍼레이터(map)를 통해 명령형이 아닌, 선언형으로 스트림을 만들어 가독성 높은 코드를 짤 수 있습니다.

 

 

이런 비동기 처리를 도와주는 Reactive Programming 라이브러리 중 대표적인게 바로 ReactiveX, Rx입니다.

RxSwift, RxJava 등등 다양한 언어로 제공되고 있죠!

 

 

조금 더하는 말

+변화의 전파

리액티브 프로그래밍 이전, 데이터를 전달하는 방식은 'Pull' 이었습니다.

ViewModel의 데이터가 변경되었더라도 View가 이를 가져가지 않으면 정보가 바뀌지 않습니다. (set 명령을 해주어야함)

그러나 리액티브 프로그래밍으로 인해 데이터 전달 방식이 'Push'로 바뀌었습니다.

ViewModel의 데이터가 변경되기만 해도 변경이 전파되어 View가 자동으로 업데이트 되죠.

Stream을 통해 흐른 데이터를 Observer를 통해 외부로 전파시키기 때문에 View로 데이터를 push하는 형태가 되는 것입니다.

비동기 처리도 마찬가지이죠.

Observer를 통해 Next, Error, Complete(*Rx기준)가 발생되면 외부에서 해야하는 처리를 정의해 변경사항을 외부로 전파시킬 수 있습니다.

 

+선언형

보통 선언형 UI에서 리액티브 프로그래밍을 많이 따르는데, 꼭 선언형이어야만 리액티브 프로그래밍을 할 수 있는 것은 아닙니다.

RxCocoa등을 이용하면 선언형 UI 라이브러리가 아니더라도 View와 ViewModel 사이에 리액티브 프로그래밍을 적용할 수 있습니다.

 

정리

---

데이터 바인딩, Rx가 존재하는 레이어는 다르지만 다 같은 원리로 작동하고 있다는 것을 알아봤습니다.

리액티브 프로그래밍이라는 '패러다임'을 따르고 있기 때문에 같은 동작원리를 가진 것입니다.

asynchronous, stream, observer로 프로그램의 흐름을 손쉽게 제어하고자 하는 거죠.

프론트 뿐 아니라 백엔드단에서도 Spring Web Flux등 리액티브 프로그래밍을 적용하고자 합니다.

알아두면 유용한 패러다임은 분명한 것 같습니다.

 

읽어주셔서 감사합니다.

 

Ref.

https://velog.io/@teo/reactive-programming (프로그래밍 패러다임과 반응형 프로그래밍 그리고 Rx)