RxSwift Beginners Episode 5 - Search TableView with Map and Filer Operators

Reactive TableVIew: SearchBar

구현 목표

• 서치 바의 텍스트 필드에 따른 값에 따라 테이블 뷰의 아이템을 필터링하는 방법의 RxSwift화

구현 태스크

1. UITableView에 바인딩되는 아이템의 BehaviorRelay화
2. 서치 바의 현재 텍스트를 통한 BehaviorRelay 내 아이템의 필터링 함수
3. 필터링된 아이템을 바탕으로 BehaviorRelay 아이템의 테이블 뷰 바인딩을 통한 테이블 뷰 그리기

핵심 코드

    private func setSearchingTableView() {
        searchBar.rx.text.orEmpty
            .throttle(.milliseconds(300), scheduler: MainScheduler.instance)
            .distinctUntilChanged()
            .map { query in
                self.tableViewItemsRx.value.filter { foodModel in
                    if query.isEmpty || foodModel.name.lowercased().contains(query.lowercased()) {
                        return true
                    } else {
                        return false
                    }
                }
            }
            .bind(to: tableView
                .rx
                .items(cellIdentifier: "customTableViewCell", cellType: CustomTableViewCell.self)) {
                    (tv, tableViewItem, cell) in
                    cell.cellLabel.text = tableViewItem.name
                    cell.cellImage.image = UIImage(named: tableViewItem.imageName)
                }
                .disposed(by: disposeBag)
    }

• 이전의 서치 바를 구현하지 않은 상태에서 원본 아이템을 그대로 테이블 뷰에 바인딩하는 함수는 더 이상 사용하지 않고, 현재 서치 바의 텍스트 상태에 따라 관찰된 아이템 목록을 테이블 뷰에 바인딩하는 새로운 함수를 사용
• throttle, distinctUntilChange는 서치 바에 텍스트를 타이핑하는 시간 조정, 변화가 없다면 현 상태를 유지하는 방법
• map을 통해 서치 바의 텍스트를, filter를 통해 매핑된 텍스트를 현재 비교할 전체 아이템의 값과 비교할 수 있는 필터링 기능 제공
• bind를 통해 필터링된 아이템만을 테이블 뷰에 바인딩, 즉 타이핑된 텍스트와 일치하는(map인 true 값을 리턴하는) 아이템만을 그리기

구현 화면

기존의 서치 바를 사용하기 위해서는 서치 바 델리게이트 함수를 커스텀하는 등 소모 비용이 컸기 때문에 보다 간편하고, 고급스러워진 코딩이 가능하다!