[iOS] MVVM & RxSwift 스터디 W2 - TableView bind items, modelSelected, cell prepareForReuse

[iOS] MVVM & RxSwift 스터디 W2 - TableView 만들어보기

곰튀김님 RxSwift 강의 중 step1 을 MVVM + TableView 로 바꿔본 위의 포스팅에서 View Controller 에서의 데이터바인딩, TableViewCell 에서 이미지 처리를 따로 정리한 글입니다!

---

1 ListViewController / 2 DetailViewController / 3 MemberCell 

---

 

1. ListViewController - 멤버 데이터를 리스트(TableView) 로 보여주는 화면

• ViewController 는 viewModel 을 갖고, 이를 통해 데이터를 처리합니다 !
• ViewController 에서 신경써야하는 작업은 데이터가 변경되었을 때, UI 업데이트를 어떻게 해야할지? 에 대한 작업입니다.
• setBinding 메소드에 모아둔 내용이 핵심입니다 ✨

맨 처음에 데이터를 받아오는 모습!

 

👀 setBinding 메소드

1. TableView 에 데이터 보여주기

viewModel.members -- (bind) --> tableView.rx.items(cellIdentifier: cellType:)

UITableViewDataSource 프로토콜에서 필수 메소드를 구현해 데이터를 표현하는 것과 동일하다. 

 

 

2. activity Indicator 애니메이션 나타내기

viewModel.members -- map {$0.isEmpty} -- (subscribe) --> setVisibleWithAnimation(v: s:)

Behavior Subject 이기 때문에 구독을 하자마자 빈 데이터가 받아와집니다. 앱 실행시 자동으로 indicator 가 나타나도록 하고, 데이터가 받아와졌을 때 indicator 가 사라지도록 하기 위해 map operator 를 추가했습니다.

 

 

3. TableView Cell 선택 시, Detail View Controller 로 이동하기

tableView.rx.modelSelected -- (subscribe) --> presentDetail(member)

TableView 의 Cell 을 선택했을 때, 실행될 동작들은 보통 UITableViewDelegate 프토로콜의 didSelectRowAt 메소드에 구현합니다. RxCocoa 에서 제공되는 tableView.rx.itemSelected 혹은 modelSelected 를 이용하면 위의 메소드를 구현함과 동일합니다! 

 

• tableView.rx.itemSelected : 선택된 Cell 위치의 IndexPath 를 전달한다.
• tableView.rx.modelSelected : 선택된 Cell 위치의 Model 을 전달한다.

 

* 참고 * 
* viewModel.members : BehaviorSubject, 기본 값 혹은 이전 값을 전달받는 Subject.
* observe(on:) : 다음 observable 이 수행될 쓰레드를 지정한다. UI 작업은 MainSchedular.instance 에서.
* dispose(by: disposeBag) : ViewController 가 사라질 때, disposable 들도 함께 메모리에서 해제하기 위함.
* bind : RxCocoa 에서 제공하는 메소드, subscribe 로 값을 직접 대입하는 것 대신 bind 로 Outlet 변수와 연결가능하다. 

 

* 글이 너무 길어져서 전체 코드는 링크로 연결할게요 

class ViewController: UIViewController {
    
    @IBOutlet var timerLabel: UILabel!
    @IBOutlet var tableView: UITableView!
    @IBOutlet var activityIndicator: UIActivityIndicatorView!
    
    let viewModel = MemberViewModel.shared
    let disposeBag = DisposeBag()
    let cellId = "MemberCell"

    override func viewDidLoad() {
        super.viewDidLoad()
        setTimer()
        setBinding()
    }
    
    private func setBinding() {
        
        // tableView datasource -- 데이터 개수, 셀에 들어갈 내용
        viewModel.members
            .observe(on: MainScheduler.instance)
            .filter { !$0.isEmpty }
            .bind(to: tableView.rx.items(cellIdentifier: cellId, cellType: MemberCell.self)) { index, item, cell in
                cell.updateUI(member: item)
            }
            .disposed(by: disposeBag)

        // activityIndicator
        viewModel.members
            .observe(on: MainScheduler.instance)
            .map { $0.isEmpty }
            .subscribe(onNext: { [weak self] visible in
                self?.setVisibleWithAnimation(self?.activityIndicator, visible)
            })
            .disposed(by: disposeBag)
        
        // tableView delegate
        // tableView.rx.itemSelected -> indexPath
        tableView.rx.modelSelected(Member.self)
            .observe(on: MainScheduler.instance)
            .subscribe(onNext: { [weak self] member in
                self?.presentDetail(of: member)
            })
            .disposed(by: disposeBag)
    }
    
    // Other methods ...
}

---

여기서, bind + observe(on: Main) 의 조합 대신 drive 를 사용할 수도 있습니다.

bind 와 drive 모두 내부적으로 subscribe 를 쓰고있으며, drive 는 무조건 MainThread 에서 동작한다.
이와 더불어 asDriver(onErrorJustReturn:) 등을 이용하면 에러가 났을 때, 처리할 기본값을 설정할 수 있다.
또한 Subject 대신 끊어지지 않는 타입을 Relay 라고 한다. 에러가 나거나 completed 되지 않고, 항상 onNext 만 있기 때문에 onNext 가 아닌 accept 로 표현한다.
* UI 작업은 항상 UI Thread (= Main) 에서 돌아가야 하고, 에러가 난다고 연결이 끊어지면 안되는 특징이 있다.
* RxCocoa 관련되어서는 차차 따로 정리하고, 필요하다면 코드를 수정해보겠습니다! 🥺

정리하자면, UI 와 관련된 코드는 Relay + drive 의 조합으로 편하고 안전하게 사용할 수 있다.
단순히 값을 사용하거나 저장하기 위해서는 Subject + bind/ subscribe 의 조합을 이용한다. 

---

2. DetailViewController

• DetailViewController 에서도 동일한 ViewModel 을 이용했습니다.
• ListVC 에서 TableView 의 셀이 클릭되었을 때, 선택된 model 을 전달받아 ViewModel 내에 selectedMember 변수의 값으로 할당합니다! 
• DetailVC 에서는 viewModel.selectedMember 를 이용해 UI 를 업데이트합니다.
• String -> UILabel.text 로의 변환은 간단하지만, avatar 이미지의 경우 url 을 통해 이미지로 변환해줘야합니다.

List View > Detail View

 

💡 DetailVC 에서 이미지 다운로드 작업

Observable<Data> -- (bind) --> avatarImage.rx.image

JSON data 를 다운받을 때 이용한 APIManger.fetchData(url:) 메소드를 통해, 이미지를 비동기로 다운로드 하는 작업도 수행해줍니다. 메소드를 통해 전달받은 Observable 에 대해 subscribe (bind) 를 해주어 이미지를 변경해주는 것입니다!

class MemberDetailViewController: UIViewController {
	
    // UILabels ... 
    @IBOutlet weak var avatarImage: UIImageView!
    
    let viewModel = MemberViewModel.shared
    var disposeBag = DisposeBag()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // UILabel.text 처리
        setImage(url: member.avatar) // binding
    }

    func setImage(url: String) {
        let orginalImageURL = url.replacingOccurrences(of: "size=50x50&", with: "")
        // Observable<Data> -> UIImage(data: )
        APIManager.fetchData(url: orginalImageURL)
            .observe(on: MainScheduler.instance)
            .map { UIImage(data: $0)! }
            .bind(to: avatarImage.rx.image)
            .disposed(by: disposeBag)
    }
}

 

3. MemberCell 

• Cell 에서 UI 와 관련된, 이미지 다운로드 작업등은 DetailVC 와 비슷하지만, Cell 은 재사용되는 특성이 있기 때문에 이를 고려해주어야합니다!
• TableView 에서 Cell 은 한번에 보여지는 개수만큼 init 되고, 스크롤 될 때에는 이전에 생성됐던 Cell 이 재사용됩니다. 그때마다 호출되는 메소드가 prepareForReuse() 인 것이구요!
• cell 마다 이미지를 다운로드 받고, 이를 disposeBag 에 담고있는 작업은 DetailVC 와 동일한데요. cell 이 재사용될때마다 DisposeBag 을 재할당해주어 disposables 을 버려주는 작업을 해줍니다. 만약 DisposeBag 을 재할당하지 않는다면, 재사용되는 셀들에서 subscribe(bind) 이후 만들어진 disposables 를 전부 다 가지고있게 되어 메모리에 남아있을겁니다 😵‍💫
• 그리고, cell 이 재사용되기 때문에 image 가 다운로드되기 전에는 이전 cell 의 image 를 보여줍니다. 이를 방지하기 위해서 image = nil 으로 할당했습니다! (아래 이미지 참고)

class MemberCell: UITableViewCell {
    
    // IBOutlets
    var disposeBag = DisposeBag()

    override func prepareForReuse() {
        super.prepareForReuse()
        // cell reuse 시에 초기화되도록 작업하기
        avatarImage.image = nil
        disposeBag = DisposeBag()
    }
    
    // Other methods ...
}

이미지 다운로딩 전에는 nil > 다운로드 후 image ! 

---

 

 

songda515/MVVM_RxSwift

참고 링크

• 곰튀김님 강의 [RxSwift, 4시간 안에 빠르게 익혀 실무에 사용하기]
• RxCocoa 를 이용한 UITableView 의 DataSource & Delegate 
• [RxSwift] bind, subscribe, drive

 

👇 혹시 부족하거나 잘못된 내용이 있으면 댓글로 알려주세요 🧐