[RxSwift] #5) RxSwift + MVVM패턴 [Subject를 활용해보자]

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

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

 

 

 

이전에 포스팅한 [RxSwift] #3) RxSwift를 활용한 MVVM패턴 [1] 에 이어지는 포스팅 입니다.

또한, 이번 글부터 코드내용을 캡쳐 형식이 아닌, 코드블럭 형식으로 작성 할 예정입니다!

---

이전포스팅에서 Observable로 생성한 변수를, 구독 한 이후에도 지속적인 값의 변경을 관찰해야하는 필요가 생겨

이를위해 Observable을 Subject로 구현해야 할 필요가 있다고 하였습니다.

(Subject에 대한 설명은 이 게시물을 참고해주세요!)

class MenuListViewModel{
    var menus : [Menu] = [
        Menu(name: "튀김1", price: 100, count: 0),
        Menu(name: "튀김1", price: 100, count: 0),
        Menu(name: "튀김1", price: 100, count: 0),
        Menu(name: "튀김1", price: 100, count: 0)
    ]
    
    var itemsCount : Int = 5
    var totalPrice : PublishSubject<Int> = PublishSubject()
}

Observable 대신 Subject를 사용하기 위해, 가장 보편적으로 많이 사용하는 PublishSubject를 적용하였습니다.

 

 

override func viewDidLoad() {
        super.viewDidLoad()
        updateUI()
        
        viewModel.totalPrice
            .map{$0.currencyKR()}
            .subscribe(onNext: {self.totalPrice.text = $0})
            .disposed(by: disposeBag)
    }

@IBAction func onOrder(_ sender: UIButton) {
        // TODO: no selection
        // showAlert("Order Fail", "No Orders")
        // performSegue(withIdentifier: "OrderViewController", sender: nil)
        
        viewModel.totalPrice.onNext(100)
        
    }

그리고

1) PublishSubject를 통해서 100이라는 값을 뿌려주면,

2) .subscribe를 통해 값을 Label에 뿌려주고 있습니다.

 

하지만, 우리가 원하는 것은 이 100이라는 값이 아니라, ORDER버튼을 누르면 값이 계속 증가하는 것을 원합니다.

따라서 .scan() 이라는 Operator를 사용해보겠습니다.

 

 

override func viewDidLoad() {
        super.viewDidLoad()
        updateUI()
        
        viewModel.totalPrice
            .scan(0, accumulator:+)
            .map{$0.currencyKR()}
            .subscribe(onNext: {self.totalPrice.text = $0})
            .disposed(by: disposeBag)
    }

.scan은, seed값인 0에 값이 들어올 때 마다 + 한 값을 방출하게 됩니다.

즉, 100 -> 200 -> 300 ... 이런식으로 계속 증가된 값을 방출합니다.

 

처음 updateUI() 함수를 사용하였을 땐, 값이 바뀔 때 마다 updateUI()를 호출해야 했습니다.

하지만, PublishSubject를 사용하면 .subscribe() 한번으로 값이 바뀔 때 마다 자동으로 값과 UI가 바뀝니다.

따라서 기존에 만들어 둔, updateUI()를 삭제 해주겠습니다.

 

 

 

 

var menus : [Menu] = [
        Menu(name: "튀김1", price: 100, count: 0),
        Menu(name: "튀김1", price: 100, count: 0),
        Menu(name: "튀김1", price: 100, count: 0),
        Menu(name: "튀김1", price: 100, count: 0)
    ]

var totalPrice : PublishSubject<Int> = PublishSubject()

그리고 사실 이 totalPrice라는 값은 menus의 각 Element들인 Menu의 (price * count)의 합입니다.

그렇다면 저 menus에 대한 Observable이 있다면, 각 Element에 접근해서 price*count의 값을 빼올 수 있지 않을까요??

 

 

class MenuListViewModel{
    var menus : [Menu] = [
        Menu(name: "튀김1", price: 100, count: 0),
        Menu(name: "튀김1", price: 100, count: 0),
        Menu(name: "튀김1", price: 100, count: 0),
        Menu(name: "튀김1", price: 100, count: 0)
    ]
    
    lazy var menusObservable = Observable.just(menus)
    
    var itemsCount : Int = 5
    lazy var totalPrice = menusObservable
        .map{$0.map{$0.price * $0.count}.reduce(0,+)}
}

lazy 변수로 만들어주는 이유는, menus와 menusObservable은 멤버변수로 존재하기 때문입니다.

(lazy 키워드 관련 자세한 설명은 이 게시물을 참고해주세요!)

 

위 코드처럼, menus가 가진 각 Menu들의 count*price를 모두 더해서 totalPrice에 전달해줍니다.

 

 

한번, 위의 코드의 흐름을 따라가봅시다.

 

1) menus의 요소인 Menu들의 count나 price가 변한다.

2) menusObservable이 Onservable.just()를 해줌으로써, menus의 상태를 계속 관찰하고 반영한다.

3) totalPrice는, menusObservable이 계속 관찰하고 있는 값을 이용하여 합계 금액을 계산하고 저장한다.

 

그럼 같은 방식으로 itemsCount도 한번 다시 만들어볼까요??

 

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

위와 같이 itemsCount를 만들어 준다면, Menu들의 갯수가 바뀔 때 마다 자동으로 전체 갯수가 계산되어 저장될 것입니다!

 

 

 

자, 그렇다면 아래의 코드도 뭔가 바뀌어야 할 것 같지 않나요??

lazy var menusObservable = Observable.just(menus)

맞습니다, 우리가 원하는 것은 결국 menusObservable의 값을 가지고 노는것 입니다!

하지만, 현재는 Observable타입으로 정의가 되어있기 때문에 한번 just되고 나서는 값이 바뀌는것 감지할 수 없어요!

 

그렇기 때문에, 값을 방출 한 이후에도 값의 변경을 감지할 수 있는 Subject를 사용해야 합니다! 

(이해하기 쉽게 설명한거라, 실제 정의와는 사알짝 느낌이 다릅니다..!)

 

그 중에서도 우린 PublishSubject를 사용하겠습니다.

또한, Subject를 사용한다는 것 자체가 계속 바뀌는 값을 감지하겠다는 의미이므로

init()을 통해, 처음 menus를 초기화하고 그 데이터를 PublishSubject가 .subscribe 한다면

(아래의 코드에서는 menusObservable이 operator인 .onNext()를 사용하고 있습니다.)

이후의 실시간으로 바뀌는 값들을 계속 관찰 할 수가 있습니다.

class MenuListViewModel{
    
    var menusObservable = PublishSubject<[Menu]>()
    
    lazy var itemsCount = menusObservable
        .map{$0.map{$0.count}.reduce(0,+)}
    lazy var totalPrice = menusObservable
        .map{$0.map{$0.price * $0.count}.reduce(0,+)}
    
    init(){
        var menus : [Menu] = [
            Menu(name: "튀김1", price: 100, count: 0),
            Menu(name: "튀김1", price: 100, count: 0),
            Menu(name: "튀김1", price: 100, count: 0),
            Menu(name: "튀김1", price: 100, count: 0)
        ]
        menusObservable.onNext(menus)
    }
    
}

이렇게 하면, 위와 같은 MenuListViewModel의 전체 코드가 완성됩니다.

그럼 이제, 실제 View를 그려주는 MenuViewController에 가서, 실제 View에 적용시켜 줍시다.

 

우선 viewDidLoad()에서 Observable들을 구독(.subscribe)해줍시다.

let viewModel = MenuListViewModel()
let disposeBag = DisposeBag()
    
override func viewDidLoad() {
    super.viewDidLoad()
        
    viewModel.itemsCount
        .subscribe(onNext: {self.itemCountLabel.text = "\($0)"})
        .disposed(by: disposeBag)
    viewModel.totalPrice
        .map{$0.currencyKR()}
        .subscribe(onNext: {self.totalPrice.text = $0})
        .disposed(by: disposeBag)
}

이렇게 viewDidLoad에 구독을 모두해놓으면, 이후에 값이 바뀔 때 마다 알아서

1) totalPrice

2) itemsCount

위 2개가 View에 업데이트가 됩니다!

 

 

그런데, 잘 보면 UITableView의 protocol들에는 아래와 같이 빨간줄이 떠있죠??

UITableView에는 아직 Observable이 연결이 안되어서 에러가 발생하는 상황

사실, 이런 Delegate패턴을 사용해서 protocol을 구현하는 UI들의 경우는, Rx가 필수적인 것은 아닙니다.

왜냐하면, 이미 Delegate패턴을 통해서 동일한 기능들이 다 구현이 되어있거든요,,,

 

하지만, Rx를 사용하는 가장 큰 이유중인 하나인 코드의 간결성을 위해서는 Rx를 접목시켜줘야 합니다!

 

 

그리고 이러한 Delegate에 정의된 protocol을 Rx로 대체해주는 라이브러리가 바로

RxCocoa입니다!!

 

 

이러한 RxCocoa를 UITableView에  접목시키면, 위 사진에 보이는 Delegate를 모조리 없애버릴 수 가 있습니다...

이와 관련된 내용은 다음 포스팅에서 정리해보도록 하겠습니다!!