[Rx + MVVM] Input과 Output을 사용한 MVVM

iOS의 MVVM패턴에는 표준이 없고 구현하는 사람마다 패턴이 조금씩 다르다.

그 중에 Kickstarter에서 사용하는 Input과 Output Protocol을 사용하는 방식이 있다.

 

방법 1. transform을 이용하여 입력을 넣어주고 출력을 받는 방법

 

Protocol with Input & Output

protocol ViewModelType{
    associatedtype Input
    associatedtype Output
    
    var disposeBag: DisposeBag { get set }
    
    func transform(input: Input) -> Output
}

ViewModel에서 사용할 Protocol을 만들어준다.

 

import Foundation
import RxSwift
import RxCocoa

final class ViewModel: ViewModelType{
    struct Input {
        let click: ControlEvent<Void>
    }
    
    struct Output {
        let text: Driver<String>
    }
    
    var disposeBag: DisposeBag = DisposeBag()
    
    func transform(input: Input) -> Output {
        let text = input.click
            .map {
                return "Hello world"
            }
            .asDriver(onErrorJustReturn: "")
        
        return Output(text: text)
    }
}

ViewController에서 발생한 click event를 Input타입으로 정의를 했고, Input을 transform메서드로 전달받아 map으로 Output타입의 Driver<String>타입으로 변환하여 return으로 리턴하게된다.

 

import UIKit
import RxSwift
import RxCocoa

final class ViewController: UIViewController {
    
    @IBOutlet weak var actionButton: UIButton!
    @IBOutlet weak var printLabel: UILabel!
    
    private let viewModel = ViewModel()
    private let disposeBag = DisposeBag()

    override func viewDidLoad() {
        super.viewDidLoad()
        bindViewModel()
        
    }

    private func bindViewModel(){
        let input = ViewModel.Input(click: actionButton.rx.tap)
        
        let output = viewModel.transform(input: input)
        
        output.text
            .drive(printLabel.rx.text)
            .disposed(by: disposeBag)
    }

}

 

위처럼 만들어주면 입출력이 구분되어서, ViewController는 단순히 View의 역할만 하게된다.

 

 

2. ViewModel 내부에 Input, Output을 만들고 이것을 변수로 노출하여준다.

protocol ViewModelType{
    associatedtype Input
    associatedtype Output
    
    var input: Input { get }
    var output: Output { get }
    
    var disposeBag: DisposeBag { get set }
}

1번과 다르게 input, output을 밖으로 노출해준다.

final class ViewModel: ViewModelType{
    struct Input {
        let inText: AnyObserver<String>
    }
    
    struct Output {
        let text: Driver<String>
    }
    
    let input: Input
    let output: Output
    
    var disposeBag = DisposeBag()
    
    private let data = ReplaySubject<String>.create(bufferSize: 1)
    
    init(){
        let text = data
            .map { data in return "\(data): Hello world!"}
            .asDriver(onErrorJustReturn: "")
        
        output = Output(text: text)
        input = Input(inText: data.asObserver())
    }
}

final class ViewController: UIViewController {
    
    @IBOutlet weak var actionButton: UIButton!
    @IBOutlet weak var printLabel: UILabel!
    
    private let viewModel = ViewModel()
    private let disposeBag = DisposeBag()

    override func viewDidLoad() {
        super.viewDidLoad()
        bindViewModel()
    }
    
    private func bindViewModel(){
        viewModel.input.inText.onNext("DH")
        
        viewModel.output.text
            .drive(printLabel.rx.text)
            .disposed(by: disposeBag)
    }
}