반응형 프로그래밍이 무엇일까요?

안녕하세요, 36기 웹 YB 김수연입니다.

저는 SOPT에서 두 기수동안 iOS 개발을 공부했는데요.

iOS 개발을 하다 웹 공부를 해보니 비슷하면서도 다른 점들이 재미있더라구요.

오늘은 그 중에서도 반응형 프로그래밍에 대한 이야기를 해볼까 합니다.

 

 

1. 반응형 프로그래밍이 무엇일까요?

반응형 프로그래밍이란, 데이터의 흐름과 변경사항의 전파에 중점을 둔 선언적 프로그래밍 패러다임이에요.

 

(1) 패러다임: 프로그래머에게 프로그래밍 관점을 갖게 해주고 결정하게 하는 역할을 해요.

예를 들어 객체 지향 패러다임이란, 프로그래머가 프로그램을 상호작용하는 “객체”로 바라보게 하는 것으로, 모든 데이터를 객체로 취급하여 객체가 처리 요청을 받았을 때, 객체 내부에 있는 기능을 사용해 처리하도록 해요.

 

(2) 선언적 프로그래밍

“어떻게(HOW)” 하는지에 중심을 둔 명령형 프로그래밍과 달리, 선언형 프로그래밍은 “무엇을(WHAT)” 하는지에 더 집중해요. 두 코드를 차이를 비교해보며 각 코드의 장단점을 살펴 봅시다!

let appjam = ["roomie", "roomie", "spoonme", "memento", "roomie", "spoonme"]

let roomie: [String] = []

for app in appjam {
	if app == "roomie" {
		roomie.append(app)
	} else {
		print("루미 빼고 다 나가ㅋㅋ")
	}
}

print(roomie)

let appjam = ["roomie", "roomie", "spoonme", "memento", "roomie", "spoonme"]

let roomie = appjam.filter { $0 == "roomie" }

if roomie.isEmpty {
	print("루미들아 다 어디갔냐능 ...")
} else {
	print(roomie)
}

 

 

(3) 데이터의 흐름과 변경사항을 전파 ⭐

옵저버블 패턴을 아시는 분이라면! 더 이해가 쉬울 거예요.

반응형 프로그래밍에서는 데이터 흐름(a)을 관찰하고, 데이터 흐름에 변경이 일어났을 때(예를 들어 10 → 20으로 변경) 변경사항에 대해 데이터와 연결되어 있는 실행 모델(sum)이 이벤트를 전파 받아서 값 갱신과 같은 특정 동작을 할 수 있도록 해요.

 

즉, 실행 모델은 데이터의 흐름을 계속해서 관찰하고 있다가 데이터가 바뀌었을 때 이벤트를 전파 받아 새롭게 동작하는 거죠!

 

 

2. 우리는 왜 반응형 프로그래밍을 사용해야 할까요?

먼저, 웹 개발에서 반응형 프로그래밍이 중요해진 계기는 다들 알고있는 웹 프레임워크로의 전환이에요.

웹 프레임워크의 본질을 반응형 프로그래밍 패러다임의 관점에서 적어볼게요.

 

Web Framework의 본질 (MVVM 패턴)
Change Detection + Binding + Template + Auto Render = Reactive
즉, 값이 변경되었을때 템플릿에 선언해둔대로 알아서 렌더링을 해준다 = 반응형

*MVVM 패턴이 궁금하다면 여기 참고

 

어떤가요? 우리가 본 반응형 프로그래밍의 정의와 유사하지 않은가요?

 

웹 프레임워크의 등장은 기존의 프로그래밍 방식과는 혁신적인 패러다임이었기에 웹 프론트에서 아주 중요한 개념이 되었어요. 이를 정의하Reactive Programming이라는 용어의 관심사도 올라가기 시작했죠. 이처럼 초기 반응형 프로그래밍의 패러다임은 데이터의 변경을 감지하고 선언적으로 프로그래밍을 하는 방법을 통해 View를 업데이트를 하는 방식으로 발전을 하기 시작했어요.

 

두 번째 이유는 반응형 프로그래밍이 비동기 이벤트에서 큰 빛을 발휘하기 때문입니다. 우리 곁엔 생각보다 많은 비동기 이벤트들이 있어요. 버튼을 누르는 것, 키보드가 올라오는 것 등 언제 발생할지 모르는 모든 이벤트가 비동기 이벤트랍니다! (사실 비동기 이벤트에 대해 얘기하려면 너.무. 길어져서요 자세한 얘기는 언젠가 다시 블로그로 낋여올게요 ㅋㅋ async/await가 iOS에서도 쓰인다는 거 알고 계신가요 ㅎ)

 

다시 돌아와서, 이러한 상황을 각각 명시해주기보다 유저의 반응이 비동기적으로 왔을 때 = 데이터의 흐름이 바뀌었을 때 = 변경사항이 있을 때 이것을 관찰하는 옵저버👀가 있다면 해당 변화를 알리고, 이에 따라 동작할 수 있도록 하는 거죠!

→ 즉 이것이 반응형 프로그래밍!

 

 

3. 그렇다면 자바스크립트에서 반응형 프로그래밍을 어떻게 구현할 수 있을까요?

궁금하실 분들을 위해 참고하면 좋은 글들을 두고 갑니다 ! ! !

저보다 더 잘 설명해주시는 분들이 많군요 ㅎ

delegate ~

 

https://velog.io/@teo/reactive-programming

프로그래밍 패러다임과 반응형 프로그래밍 그리고 Rx

https://velog.io/@gygy/Observer-pattern

바닐라 자바스크립트로도 리액트처럼 코딩할 수 있다? 반응형 패턴으로 선언적 프로그래밍하기

https://velog.io/@sehyunny/The-Observer-Pattern-in-JavaScript

(번역) 자바스크립트에서의 옵서버 패턴 - 반응형 동작의 핵심

 

사실 저는 Rx 러버입니다.