검색 화면 등의 인터랙션을 받고 → 모델의 변화 → UI 업데이트 (⇒ 이러한 양방향 데이터 흐름에서 알엑스의 구조가 사용하기 좋다.)

<aside> ✏️ 2022.11.03.목

다른 화면에서도 Rx를 적용해보겠다. 언젠간.

</aside>

작업

검색화면

이렇게 검색화면이 있다고 할 때, 뷰의 입력과 그에 따른 모델의 변화를 정리하면 아래와 같다.

• 입력
  • 사용자가 검색바를 터치
  • 검색어의 변화
• 출력
  • 사용자가 입력한 검색에어 따른 검색 결과 모델의 변화

위의 과정을 뷰모델이 관리한다고 생각할 수 있다.

final class SearchViewModel {
    var isFiltering: BehaviorRelay<Bool> = BehaviorRelay(value: false)
    
    var location = ["강남구", "강동구", "강북구", "강서구", "관악구", "광진구", "구로구", "금천구", "노원구", "도봉구", "동대문구", "동작구", "마포구", "서대문구", "서초구", "성동구", "성북구", "송파구", "양천구", "영등포구", "용산구", "은평구", "종로구", "중구", "중랑구"]
    var filteredLocation: BehaviorRelay<[String]> = BehaviorRelay(value: [])
    
    var numberOfRowsInSection: Int {
        return filteredLocation.value.count
    }
    
    func cellForRowAt(at indexPath: IndexPath) -> String {
        return filteredLocation.value[indexPath.row]
    }
    
    func filterLocation(_ text: String) {
        let filtered = location.filter { $0.contains(text) }
        filteredLocation.accept(filtered)
    }
}

• 필터링이 되는 중인지 아닌지를 판단하는 isFiltering 변수를 두어서 이 변수의 변화에 따라 뷰에서 키보드가 올라가고 ↔ 내려가는 것을 관리할 수 있다.
• 검색어를 받아서 그 검색어를 포함하고 있는 배열을 다시 반환하는 로직 역시 뷰모델에서 관리하면 된다.
  • 이 때 필터 함수를 작성하고
  • 필터링 된 데이터를 이벤트를 구독하기도 하고 방출하기도 하는 형태로 작성하여 모델의 변화가 있을 때마다 UI가 업데이트 될 수 있도록 한다.

그리고 뷰에서 하는 일은

• 사용자의 인터렉션을 받고, 이를 뷰모델에게 전달하는 것
• 뷰모델에서 바꾸고 있는/관리하는 모델의 변화를 감지해서 UI를 업데이트 하는 것

    private func bind() {
        viewModel.filteredLocation.accept(viewModel.location)
        
        viewModel.filteredLocation
            .withUnretained(self)
            .bind { vc, location in
                vc.rootView.tableView.reloadData()
            }
            .disposed(by: disposeBag)
        
        searchBar.rx.text.orEmpty
            .debounce(RxTimeInterval.microseconds(5), scheduler: MainScheduler.instance)
            .withUnretained(self)
            .bind { vc, value in
                if value != "" {
                    vc.viewModel.isFiltering.accept(true)
                    vc.viewModel.filterLocation(value)
                }
            }
            .disposed(by: disposeBag)
        
        searchBar.rx.searchButtonClicked
            .withUnretained(self)
            .bind { vc, _ in
                vc.searchBar.resignFirstResponder()
            }
            .disposed(by: disposeBag)
        
        viewModel.filteredLocation
            .bind(to: rootView.tableView.rx.items(cellIdentifier: MainSearchTableViewCell.reuseIdentifier, cellType: MainSearchTableViewCell.self)) { [weak self] index, item, cell in
                guard let self = self else { return }
                
                if let text = self.searchBar.text {
                    if self.viewModel.isFiltering.value {
                        cell.setData(item, true, text)
                    } else {
                        cell.setData(item, false, text)
                    }
                }
            }
            .disposed(by: disposeBag)
        
        rootView.tableView.rx
            .itemSelected
            .withUnretained(self)
            .subscribe(onNext:  { (vc, value) in
                vc.locationClosure?(vc.viewModel.filteredLocation.value[value.row])
                vc.navigationController?.popViewController(animated: true)
            })
            .disposed(by: disposeBag)
    }