RxSwift - MVVM 디자인 패턴

RxSwift 와 MVVM 디자인 패턴

 

https://younngjun.tistory.com/41

MVC 구조의 한계와 MVVM

앞서 MVVM 디자인 패턴의 개념과 함께 MVVM 으로 디자인 된 앱 위에서 RxSwift 의 강력함을 짚고 넘어갔었다. 이번 공부에서는 왜 RxSwift 가 MVVM 과 함께 사용되었을 때 강력한지에 대해 이해해본다.

struct Menu {
    var name: String
    var count: Int
}

ViewModel 에는 Observer 이자 Observable 한 BehaviorSubject 인 menu 를 선언하였다. 임시로 초기값도 부여하였다.

class ViewModel {
    var behaviorSubject = BehaviorSubject<[Menu]>(value: [])
    ...
    
    init() {
        let menus: [Menu] = [
            Menu(name: "aa", count: 0),
            Menu(name: "bb", count: 1),
            Menu(name: "cc", count: 2),
            Menu(name: "dd", count: 3),
        ]
        
        behaviorSubject.onNext(menus)
    }
}

 

View 에서는 UILabel 컴포넌트가 있고, 여기에 넣어줄 데이터는 시시각각 변한다고 가정해보자. UILabel 에 넣을 데이터는 각 menu 들의 전체 count 이다. 

MVVM 에서 View 는 로직에 손을 대지 않는다. 변하는 데이터를 추적하면서, View 를 계속 그려주어야 한다. 

import RxSwift
import RxCocoa

class ViewController: UIViewController {

    var viewModel = ViewModel()
    var disposeBag = DisposeBag()
    
    override func viewDidLoad() {
        // countLabel 에 넣을 count 데이터가 필요하다
        // 물론 count 데이터는 매번 변화하는 behaviorSubject 를 주시해야한다.
        viewModel.count
                    .map { "\($0)" }
        //            .subscribe(onNext: {
        //          	    self.countLabel.text = $0
        //            })
                    .bind(to: self.countLabel.rx.text = $0)
                    .disposed(by: disposeBag)
    }
}

 

count 데이터를 넣어주기 위해 menu 의 변화를 계속 주시하는 count 라는 변수를 ViewModel 에 선언하였고, 이에 대한 로직을 추가하였다.

lazy var count = behaviorSubject.map { $0.map { $0.count }.reduce(0, +) }

 

이렇게 되면 BehaviorSubject 타입인 behaviorSubject 가 변할 때마다, 이를 주시하고(subscribe) 있는 View 의 countLabel 도 변한다.