[RxSwift] #6) RxSwift + MVVM패턴 [RxCocoa를 활용한 UITableView 구성]

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

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

 

 

 

이전에 포스팅한 RxSwift + MVVM패턴 [Subject를 활용해보자]에 이어지는 포스팅 입니다.

 

 

---

저번 포스팅 말미에 나왔던 RxCocoa에 대해 간단하게 알아보도록 하겠습니다.

 

RxCocoa를 요약하자면,

[RxSwift의 요소들을  UIKit에 적용할 수 있도록 extension 시켜서 접목시킨 것]

이라고 설명할 수 있습니다.

 

글로만 보면 쉽게 이해가 되지 않으니, 예시를 통해 알아보도록 하겠습니다.

 

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

현재는 이렇게 코드가 구성이 되어있습니다.

viewModel의 itemsCount를 구독하면서, PublishSubject<Int>값을 itemCountLabel.text에 넘겨주고 있죠?? 

 

이 코드를 한번 이렇게 바꿔볼까요?

override func viewDidLoad() {
        super.viewDidLoad()
        
        viewModel.itemsCount
            .map{"\($0)"}
            .bind(to: itemCountLabel.rx.text)
            .disposed(by: disposeBag)
            
                                    .
                                    .
                                    .
}

어떤점이 달라졌는지 아시겠나요??

바로 .subscribe()를 통해 text에 값을 전달 해 주었던 부분이

-> .bind()라는 operator를 통해서 itemCountLabel에 직접 값을 집어넣고 있습니다!

(.map()이 새로 생긴 이유는, text에 값을 직접 binding시켜야 하기 때문에 이전에 미리 String타입으로 변환하는 작업을 추가 한 것입니다.)

 

즉, .bind()라는 operator를 사용하면, UIKit의 컴포넌트에 직접 값을 전달할 수 있는데 이를 위해서는 

.rx라는 키워드를 사용해야하고 이것을 RxCocoa에서 제공해줍니다!

 

사실 .rx를 써야한다기 보다는 binder<T> 타입으로 변환해주는 extension이 필요 한 것이지만,

RxCocoa라이브러리에서는 .rx 라는 이름으로 대부분 지원해주고 있습니다.

(하지만, 대부분 이라고 적은 것은 당연히 개발자가 필요한 정도에 따라서는 새로 extension을 만들어줘야 한다는 의미입니다!)

 

또한, .bind()를 사용한 코드를 보면 알 수 있지만 순환참조를 알아서 처리 해 준다는 장점이 있습니다.

그럼 최종적으로, Observable을 UIKit에 바인딩 해주는 코드는 아래와 같이 구성됩니다!

override func viewDidLoad() {
        super.viewDidLoad()
        
        viewModel.itemsCount
            .map{"\($0)"}
            .bind(to: itemCountLabel.rx.text)
            .disposed(by: disposeBag)
        viewModel.totalPrice
            .map{$0.currencyKR()}
            .bind(to: totalPrice.rx.text)
            .disposed(by: disposeBag)
    }

그런데 만약, data처리가 main thread가 아닌 global thread에서 처리가 된다면,  위의 코드가 정상적으로 처리가 될까요???

 

사실 iOS의 기본적인 동작 thread는 main thread로 지정이 되어 있습니다.

하지만, 반드시 모든 처리가 main에서 처리가 된다는 보장을 할 수 없고, 사용자가 임의로 변경해 버릴 수 있습니다.

그렇기 때문에, 우리는 위 코드에 이전에 알아보았던 observeOn()이라는 operator를 사용하여 

아래와 같이 구성하면, 해당 코드의 동작을 강제로 main쓰레드로 분기할 수 있습니다!!

 override func viewDidLoad() {
        super.viewDidLoad()
        
        viewModel.itemsCount
            .map{"\($0)"}
            .observeOn(MainScheduler.instance)
            .bind(to: itemCountLabel.rx.text)
            .disposed(by: disposeBag)
        viewModel.totalPrice
            .map{$0.currencyKR()}
            .observeOn(MainScheduler.instance)
            .bind(to: totalPrice.rx.text)
            .disposed(by: disposeBag)
    }

 

 

 

자, 그렇다면 이제 본격적으로 우리가 이번에 하고자했던 menusObservable을 UITableView에 바인딩 해보도록 하겠습니다.

위에서와 동일하게 .rx를 사용할텐데, 우선 코드를 보고 설명하도록 하겠습니다.

let cellID = "MenuItemTableViewCell"
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        
        viewModel.menusObservable
            .bind(to: tableView.rx.items(cellIdentifier: cellID, 
            cellType: MenuItemTableViewCell.self)){index, item, cell in
                cell.title.text = item.name
                cell.price.text = "\(item.price)"
                cell.count.text = "\(item.count)"
            }
            .disposed(by: disposeBag)
    }

위의 코드를 보면, 역시나 .bind를 사용하고 tableview.rx를 사용하는 것 까지는 이전과 동일하죠? 다음도 크게 어렵지 않습니다.

이후에는 .items(cellIdentifier: , cellType: )를 호출하는데, 이 함수는 @escaping closer를 반환하게 됩니다.

(cellIdentifier에는 cell의 ID를 입력 해 주고, cellType에는 말 그대로 해당 cell의 타입을 작성해주면 됩니다.)

 

이를 통해서 @escaping closer에는 index, item, cell이 인자로 들어가게 됩니다.

각 인자들은 

1) index : IndexPath.row와 같은 역할

2) item : tableview에 넣어주는 실제 데이터(정확하게는 Sequence의 Element!).

(위의 예시에서는 [Menu]의 index별 Element가 들어가게 됩니다!)

3) cell : tableview에서 index별로 그려줄 cell의 정보

를 의미합니다!

 

자 그럼 이대로 실행을 시키면 잘 동작을 할까요???

.

.

.

정답은 "그렇지 않다!" 입니다.

 

그 이유에 대해서는 조금 생각을 해 봐야합니다.

우리는 현재 PublishSubject타입으로 생성이 된 menusObservable을 사용하고 있습니다.

 

그런데 Subject의 큰 특징 중 하나가, 생성과 동시에 Observable을 방출하기 시작한다 라는 점 입니다.

아래의 마블그림을 한번 보겠습니다.

첫번째 stream은 .subscribe()시점 이후에 데이터가 들어오므로 정상적으로 처리가 되지만 / 두번째 stream은 .subscribe시점 이후에 데이터가 없음

이 사진에서 맨위의 [Red] [Green] 데이터는 이미 Observable로 방출이 되고 있는 모습을 볼 수 있습니다.

그런데, 가장 아래에서 .subscribe()를 한 시점에서는 이전 data에대한 정보를 알 수 없기 때문에 이 PublishSubject를 

.subscribe()한다고 해도 아무런 값을 가지고 있지 않게 되는 것입니다.

(참고로, 아래에서 두번째 stream과 가장 아래의 stream은 아예 별도의 stream 이라는 점을 잊으시면 안됩니다!!!)

 

그런데 우리가 작성한 아래의 코드를 보면,

class MenuViewController: UIViewController {
    let viewModel = MenuListViewModel()
    let disposeBag = DisposeBag()
    let cellID = "MenuItemTableViewCell"
    
    override func viewDidLoad() {
        super.viewDidLoad()
        viewModel.menusObservable
            .bind(to: tableView.rx.items(cellIdentifier: cellID,
            cellType: MenuItemTableViewCell.self)){index, item, cell in
                cell.title.text = item.name
                cell.price.text = "\(item.price)"
                cell.count.text = "\(item.count)"
            }
            .disposed(by: disposeBag)
    }
                                    .
                                    .
                                    .
}
    
 class MenuListViewModel{    
    var menusObservable = PublishSubject<[Menu]>()
    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)
    }
}

viewModel이라는 변수가 생성이 되는 동시에 init()함수를 통해 초기화를 진행하게 됩니다.

그런데 이 초기화 과정에서 menusObservable에서 menus를 보내는것을 볼 수 있습니다.

 

즉,

우리가 menusObservable을 바인딩하여 tableView에서 해당 item을 관찰 하는 시점보다

데이터가 들어간 시점이 앞서기 때문에, PublishSubject의 특성 상 .subscribe()이전 데이터를 알 방법이 없는 것

입니다.

 

그렇다면 문제는 알았으니 해결방법도 있겠죠?

바로 직전 데이터를 가져올 수만 있다면 코드가 정상적으로 동작할 것 입니다!

그리고 이 기능을 하는 Subject도 우리는 이미 BehaviorSubject라는 것을 알고 있습니다.

(혹시, Subject의 종류에 대해 잘 모르시는 분은 이 게시물을 참고해주세요!)

 

따라서, 아래 코드와 같이 MenuListViewModel 클래스에서 menusObservable을 선언 할 때, BehaviorSubject로 생성해준다면 

.subscribe()하기 직전 값인, menus를 불러올 수 있게 됩니다!

class MenuListViewModel{
    
    var menusObservable = BehaviorSubject<[Menu]>(value: [])
    
    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)
    }
    
}

 

그렇다면 정말 Binding이 전부 잘 되어있는지,

ORDER버튼을 누르면 값이 변하게하여 동작해보겠습니다.

@IBAction func onOrder(_ sender: UIButton) {
        // TODO: no selection
        // showAlert("Order Fail", "No Orders")
        // performSegue(withIdentifier: "OrderViewController", sender: nil)
        
        viewModel.menusObservable
            .onNext([Menu(name: "용인", price: 1000, count: Int.random(in: 0...4)),
                     Menu(name: "용인", price: 1000, count: Int.random(in: 0...4)),
                     Menu(name: "용인", price: 1000, count: Int.random(in: 0...4))
            ])
        
    }

이렇게 ORDER버튼을 누르면 menusObservable에 데이터를 추가하는 동작을, 코드로 작성하고 실행하면

실제 원하는대로 잘 동작하는 것을 확인할 수 있습니다!

 

그럼 이제 clear를 누르면, 주문 금액과 주문 갯수를 초기화 하는 코드 작성을 해 보겠습니다!

@IBAction func onClear() {
        viewModel.clearAllItemSelections()
    }

우선 위의 코드처럼, viewModel을 통해 clearAllItemSelections()를 호출합시다.

그리고 실제 viewModel파일에 가서 해당 함수를 만들어 봅시다.

func clearAllItemSelections(){
        menusObservable
            .map {
                $0.map{ m in
                    Menu(name: m.name, price: m.price, count: 0)
                }
            }
            .subscribe {
                self.menusObservable.onNext($0)
            }
    }

위와같이 코드를 작성하면, 해당 함수가 호출 될 때 마다 menusObservable의 데이터를 count가 0인 값으로 변환하고

다시 .subscribe하여 새로운 stream을 만들어줍니다.

 

그런데, 우리가 viewDidLoad에 .subscribe하여 만든 stream은 App LifeCycle에 의해 해당 View에서 딱 1번만 호출되고, View가 사라질 때 자동으로 dispose되게 됩니다.

 

그렇지만 우리의 코드는 clear버튼을 누를 때 마다 clearAllItemSelections()를 호출하기 때문에,

버튼을 누를 때 마다 .subscribe()를 통해 계속 새로운 stream을 만들게 됩니다.

 

func clearAllItemSelections(){
        menusObservable
            .map {
                $0.map{ m in
                    Menu(name: m.name, price: m.price, count: 0)
                }
            }
            .take(1)
            .subscribe {
                self.menusObservable.onNext($0)
            }
    }

따라서, 위의 코드와 같이  .take()이라는operator를 사용하여 1번 실행하면자동으로 해당 stream이 dispose되게 만들어서

무의미한 stream이 계속 살아있는 것을 막아줍니다.

 

 

 

 

 

 

---

 

 

 

+

사실, 해당 View에서의 마지막 기능인 주문 개수 추가/감소 기능이 남았습니다.

왼쪽의 + - 버튼을 누르면, 해당 상품의 갯수를 설정 가능하다.

하지만 지금까지 공부한 기능들을 잘 사용하면, 이 주문 개수를 조절하는 기능도 충분히 만들어 볼 수 있습니다.

따라서, 이 부분은 자료를 안 보고 직접 만들어 보시는 것을 추천 드립니다!