[Programming] 반응형 프로그래밍 - 1. 기본 개념

🧑🏻‍💻 내가 반응형 프로그래밍을 공부하게 된 이유

갑자기 채용공고들을 올려서 이게 뭐지 싶겠지만, 여기서 우대 사항, 참고 사항에 들어가는 내용 중에 공통으로 보이는 키워드는 반응형 프로그래밍, RxSwift가 주로 보인다.

 

반응형 프로그래밍에 대해서 제대로 공부해 봐야겠다는 생각이 들었던 가장 큰 이유는 필요해 보이기 때문이 컸다. 왜냐하면 신입 개발자 입장에서 반응형 프로그래밍이 최고이니 공부해 봐야겠다. 이런 식으로 판단을 내릴 수는 없다고 생각하고 위처럼 굵직한 기업들이 그 방식을 채택하고 있다면 충분히 공부할 가치가 있는 수준... 이 아니고 알아야 한다고 생각한다.

 

물론 기존에 Combine을 사용하면서 느낀 점은 데이터가 복잡해지고, 비동기 개념이 나오고... 변경되는 데이터 시점을 알 수 없기 때문에 선언형 프로그래밍과 함께 반응형 프로그래밍이 나올 수밖에 없었다고 생각하고 있었지만, 이 기회에 조금 더 제대로 학습을 해봐야겠다고 생각했다.

🧙 반응형 프로그래밍이란?

나는 이럴 때 항상 위키피디아를 찾아본다. 정확하게 출처를 알 수 없는 정보의 바다에서 위키피디아는 신뢰성 높은 곳이라고 생각한다.

Reactive programming - Wikipedia

In computing, reactive programming is a declarative programming paradigm concerned with data streams and the propagation of change.

아...? 그러니까 반응형 프로그래밍은 데이터 스트림과 변화의 전파와 관련된 선언적 프로그래밍 패러다임이라고 한다.(???) 일단 반응형 프로그래밍에 대해서 조금은 알고 있어서 뜻이 이해는 가는 것 같지만, 처음 보는 사람은 도저히 이게 무슨 뜻인지 모를 것 같다.

✅ 예제 코드 (의사 코드)

하지만 아래에 있는 예제코드를 보면 감이 잡힐 것이라고 생각한다. 아래와 같은 코드가 있다고 해보자. 이 코드를 이해하는건 어렵지 않다고 생각해서 설명은 생략하겠다.

var b = 1
var c = 2
var a = b + c
b = 10
console.log(a) // 3 출력!

 

만약에 우리가 $= 라는 단순히 초기 계산뿐 아니라, 오른쪽 표현식에 포함된 변수들이 변경될 때 자동으로 재계산을 해주는 가상의 반응형 대입 연산자를 만든다고 해보자.

var b = 1
var c = 2
var a $= b + c
b = 10
console.log(a) // 12 출력!

 

데이터의 변화에 따라서 a가 12로 자동으로 업데이트되었다. 이렇게 b나 c가 바뀌게 된다면 a도 바꾸도록 하여라라는 $=를 추가해 줌으로써 반응형 프로그래밍 형식을 띠게 되었다. $=는 무엇을 할 것인지 선언적 방식으로 정의했다고 한다. b나 c가 바뀌면 어떻게 a가 업데이트 되는지 나와있지 않다. 내부 구현은 보이지 않고, 나는 무엇을 원하는지만 정의했기 때문이다.

 

이로써 선언적 프로그래밍의 성격을 가지고 있으면서 데이터의 변경을 전파하고 반영하는 방식을 반응형 프로그래밍이라고 하는구나! 라고 이해할 수 있게 되었다.

 

🧐 여기서 또 궁금했던 점! 위키피디아의 정의를 보면 "데이터 흐름과 변화의 전파"라고 했는데 데이터 흐름이 변화의 전파와 같은 느낌인데 왜 데이터 흐름이라는 단어를 따로 사용했지?라고 생각해 보니 반응형 프로그래밍에서는 데이터가 어떻게 변환되고 흘러갈지 코드를 작성하게 되는데 이 부분에서 데이터 스트림이라는 키워드도 중요한 특징으로 여겨지는 것 같다. (이 부분은 실제 프로그래밍해보면 무슨 뜻인지 알 수 있으니 이해가 안된다면 넘어가도록 하자)

 

아래의 예시는 반응형 프로그래밍은 아니고, 데이터 스트림의 아주 간단한 예시이다. 각 단계가 데이터의 변환 단계를 나타내고 한 흐름에 따라 처리되는 모습이 보인다. 반응형 프로그래밍에서 주로 사용하는 방식이다.

// 배열에 2를 곱한 뒤 앞의 3개 요소 출력하기

Array.of(1,2,3,4,5)
  .map(x => x * 2)
  .slice(0, 3)
  .forEach(x => console.log(x))

🐈‍⬛ PULL 과 PUSH

데이터 흐름을 전달하는 방식으로 PULL 과 PUSH 두가지 개념이 있다. 아래의 그림에서 화살표는 원하는 데이터의 흐름으로 보면 될 것 같다.

 

PULL은 데이터 소비자가 데이터를 달라고 하는 것이다. 외부 환경에게서 원하는 데이터를 달라고 하는 것이다. 결국 데이터의 변경을 계속 물어봐야 한다는 것이다.

PUSH는 데이터 생산자가 데이터를 주는 것이다. 알아서 데이터가 변경되면 데이터 생산자가 소비자에게 데이터를 준다고 할 수 있다.

반응형 프로그래밍은 매번 확인해야하는 PULL 방식이 비효율적이라고 느껴 PUSH 방식으로 동작하는 것이다. 제어권을 외부에 준다고 해서 제어권 역전이라는 용어도 있다고 한다.

 

생각해보면 데이터 소비자가 데이터를 처리할 여건이 되어있을 때 데이터를 받는 것이 좋아보인다. 만약에 다른일 하고 있는데 데이터를 계속 보내주게 되면 백프레셔(Backpressure)가 생기게 되는데 처리 가능한 데이터 양만 요청하는 등 백프레셔 처리가 필요하다.

🦎 반응형 프로그래밍의 등장 배경

일부로 등장 배경을 마지막에 두었다. 사실 이미 어떠한 문제가 발생했고, 그것에 대한 해결책 중 하나가 반응형 프로그래밍인 것이기 때문에 우선 반응형 프로그래밍에 대해서 안 뒤, 문제점을 본다면 더 이해가 잘 될 것이라고 생각했다.

🔀 복잡한 데이터 구조와 흐름

애플리케이션이 처리해야 하는 데이터가 점점 더 많아지고, 다양한 소스(네트워크, 사용자 입력, 센서 등)에서 발생하면서, 데이터의 흐름과 변화에 대한 명시적인 관리가 필요해졌다.

↩️ 비동기 프로그래밍

비동기 이벤트와 작업이 많아지면서, 전통적인 명령형 방식은 콜백 지옥(callback hell)이나 상태 관리의 복잡성 등의 문제가 생기게 되었다. 반응형 프로그래밍은 데이터 스트림과 연산자 체인을 통해 이러한 비동기 프로세스를 선언적으로 관리할 수 있다.