[RxSwift] #3) RxSwift + MVVM패턴 [기본 프로젝트 구성]

본 포스팅은 곰튀김님의 강의영상을 기반으로, 개인적으로 공부한 내용을 정리한 글입니다.

더욱 자세한 내용은, 강의 영상을 직접 시청하시는것을 추천드립니다! 

 

 

---

1. 프로젝트를 MVVM 패턴으로 구성하기

 

 

 

간단한 프로젝트를 진행하면서, RxSwfit의 실제 적용사항에 대해 알아보겠습니다.

우선 해당 프로젝트는 MVVM패턴을 기반으로 작성되는 프로젝트입니다.

 

진행할 프로젝트의 기본 폴더구조와, View 화면은 아래와 같습니다.

폴더 구조 / MenuViewController 화면 / OrderViewController 화면

1) Model : APIService로 받아올 rawData 구조 파일

2) APIService : Menu의 Model로 fetching 해오는 API가 URLSession으로 작성 되어있음

3) MenuViewController : tabelView로 구성된 홈 화면 ViewController

4) MenuItemTableViewCell : MenuViewController의 테이블 뷰의 cell 정보

5) OrderViewController : 홈에서 ORDER를 누르면 나오는 ViewController

 

 

메인화면을 담당하는 MenuViewController를 살펴보면, 실제로 View 표현을 위한 요소는 name / price / count가 있습니다.

 

 

실제 MenuViewController에 표현하기 위한 모델

따라서, View를 위한 Model인 'Menu' 라는 ViewModel파일을 따로 만들어줍니다.

 

 

 

numberOfRowsInSection에 menus.count를 설정하고 / cellForRowAt에서 각 cell의 Label값을 설정 해준다.

Array<Menu>타입의 menus라는 변수를 만들고, 더미데이터를 넣어 줍니다.

그리고, tableView의 [numberOfRowsInSection] / [cellForRowAt]를 각각 설정 해줍니다.

 

 

아래는, 해당코드를 실행시킨 MenuViewController의 화면입니다.

더미데이터로 실행시킨 화면.

 

 

 

 

menus라는 데이터들을 따로, MenuListViewModel이라는 파일로 빼줌

이때,  'menus'라는 더미데이터는 ViewController가 가지고 있기에는 너무 ViewController가 Massive해지므로 

따로 'MenuListViewModel'라는 이름의 파일로 만들어줍니다.

 

 

 

 

MenuListViewModel타입의 변수 viewModel을 생성해준다.

그리고, MenuViewController에 viewModel 이라는 변수를 만들어주고, type을 MenuListViewModel로 만들어줍니다.

 

 

 

 

viewModel의 멤버변수인 menus를 사용하여, 값을 재설정 해준다.

이전에 설정 해주었던 [numberOfRowsInSection] / [cellForRowAt] 또한 viewModel변수를 사용하여 재설정 해줍니다.

 

 

 

 

이렇게 하면 가장 기본적인 MVVM구조의 프로젝트가 만들어졌습니다.

이제 본격적으로 RxSwift를 적용해봅시다. 

 

 

 

---

2. RxSwift 적용하기

 

 

RxSwift / RxCocoa를 import 해준다.

우선, MenuViewController에 RxSwift와 RxCocoa를 import시켜줍니다.

-> 이때 RxCocoa란 기존의 cocoa pod에 Rx기능을 Extension 해준 것으로 생각하면 됩니다.

 

 

 

몇 개를 담았는지를 보여주는 Items / 총 얼마인지를 나타내는 totalPrice

우선, MenuViewController에 우리가 보여줘야 할 데이터가 더 없는지를 찾아보니,

담은 아이템의 갯수와 / 담은 아이템들의 총 가격을 보여줘야 한다는 사실을 알 수 있었습니다.

 

 

 

MenuListViewModel에 itemCount & totalPrice라는 변수를 생성해주었다 / 실제 View에 나타나는 Label에 해당 값을 넣어주었다.

따라서, View에 보여주기 위한 Model인 ViewModel의 내용을 수정 해주고, View의 Label에도 해당 값을 넣어주었습니다.

 

 

 

 

본격적으로 RxSwift를 사용하여 ORDER의 기능을 구현하기 전에,

Test하는 차원에서 'ORDER버튼을 누르면 totalPrice의 가격이 100원씩 증가하고, 그것이 실제 Label에도 표현'되게 해보겠습니다.

 

이렇게 값을 변경해주면, 과연 실제 View에 보이는 Label에도 값이 변경되는것이 보일까??

당연하게도 이렇게만 작성을 하면, 실제 UI변경은 이뤄지지 않습니다...

이유는 다 아시겠지만, 변화되는 값에 따라서 UI를 새로 그려주는 작업이 함께 이뤄지고있지 않기 때문입니다.

그렇다면 UI변경 코드를 저 onOrder()에 작성하면 UI변경이 이뤄지지 않을까요????

 

 

 

과연 이번에는 생각대로 잘 실행이 될까????

당연히 잘 동작한다!

이렇게 UI동작까지 이뤄지게 해 주었습니다.

그런데, 지금 작성된 방식은 '값이 변경 될 때 마다 우리가 updateUI라는 함수를 호출하면서 label의 값을 직접 바꿔주는 형태'입니다.

값의 변경이 감지되면, 자동으로 value와 UI가 변경되게 할 수는 없을까요????

 

 

당연히 가능하고, 우리는 이것을 위해 RxSwift를 사용합니다!

 

 

 

Observable<Int>타입으로 재정의

우선 MenuListViewModel에 정의되어있는 'totalPrice'를 Observable타입으로 수정해줍시다.

 

 

operator를 사용하여, 적절하게 값을 변환하고 onNext를 통해 방출한다. / DisposeBag()은 미리 설정 해두기.

그리고, updateUI()에서 'totalPrice.text = viewModel.totalPrice.currencyKR()' 부분을 주석 처리해주고

viewDidLoad()에서 'viewModel.totalPrice'를 subscribe 해줍니다.

 

 

 

MenuViewController init화면

실행을 해보면, 위와같이 원하는 대로 초기값이 잘 설정되어 있는 것을 알 수 있습니다.

하지만 지금 상태에서 ORDER버튼을 누른다고 해도 value가 변동 되지도 않고, UI가 바뀌지도 않습니다.

 

 

 

그렇다면 어떻게 ORDER를 눌러서 100원이 추가가 될 때 마다 Label도 바뀌게 Observable을 사용할 수 있을까요??

이미 우리가 만든 totalPrice는 .just를 통해 하나의 Stream으로 만들어져 버린상황인데

어떻게 이후의 값에 관여할 수 있을까요?

 

사람들은 이러한 고민들 끝에, 

Observable의 역할과 Observer의 역할을 모두 할 수 있는 Subject 라는 것을 만들어 사용하였습니다.

즉, 이벤트를 발생(.emit)할 수도 있고 이벤트를 처리(.subscribe)할 수도 있는 것 입니다.

 

이와 같은 특성을 이용하여, View에서 User의 Input을 viewModel의 Subject가 구독(.subscribe)하고,

구독을 통해 발행된 값(.emit)을 바탕으로 viewModel에서  가공된 데이터를 View가 구독(.subscribe)할 수 있습니다.

.

.

.

.

자세한 사용법은 다음 포스팅에서 계속 이어가겠습니다.