[swift] RxCocoa를 이용한 테이블뷰, 컬렉션뷰 처리 방법

17 Nov 2023

swift

RxCocoa는 RxSwift의 확장 라이브러리로, iOS 애플리케이션 개발에 사용되는 UIKit에서 Reactive Programming을 적용할 수 있게 해줍니다. 이번 포스트에서는 RxCocoa를 이용하여 테이블뷰와 컬렉션뷰를 처리하는 방법에 대해 알아보겠습니다.

테이블뷰

테이블뷰에 필요한 섹션과 셀을 정의합니다.
RxCocoa의 RxTableViewDataSourceType 프로토콜을 구현하여 tableView(_:cellForRowAt:source:configureCell:disposeBag:) 메서드를 구현합니다.
ViewModel에서 테이블뷰에 바인딩할 데이터 소스 Observable을 생성합니다.
ViewController에서 RxCocoa의 bind(to:) 메서드를 사용하여 테이블뷰와 데이터 소스를 바인딩합니다.

import UIKit
import RxSwift
import RxCocoa

class MyTableViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    
    let disposeBag = DisposeBag()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let viewModel = MyTableViewModel()
        
        viewModel.dataSource
            .bind(to: tableView.rx.items(cellIdentifier: "cell")) { _, model, cell in
                cell.textLabel?.text = model.title
            }
            .disposed(by: disposeBag)
    }
}

class MyTableViewModel {
    let disposeBag = DisposeBag()
    let dataSource = Observable<[MyModel]>.just([
        MyModel(title: "Item 1"),
        MyModel(title: "Item 2"),
        MyModel(title: "Item 3")
    ])
}

struct MyModel {
    let title: String
}

컬렉션뷰

컬렉션뷰에 필요한 섹션과 셀을 정의합니다.
RxCocoa의 RxCollectionViewDataSourceType 프로토콜을 구현하여 collectionView(_:cellForItemAt:source:configureCell:disposeBag:) 메서드를 구현합니다.
ViewModel에서 컬렉션뷰에 바인딩할 데이터 소스 Observable을 생성합니다.
ViewController에서 RxCocoa의 bind(to:) 메서드를 사용하여 컬렉션뷰와 데이터 소스를 바인딩합니다.

import UIKit
import RxSwift
import RxCocoa

class MyCollectionViewController: UIViewController {
    @IBOutlet weak var collectionView: UICollectionView!
    
    let disposeBag = DisposeBag()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let viewModel = MyCollectionViewModel()
        
        viewModel.dataSource
            .bind(to: collectionView.rx.items(cellIdentifier: "cell")) { _, model, cell in
                cell.textLabel?.text = model.title
            }
            .disposed(by: disposeBag)
    }
}

class MyCollectionViewModel {
    let disposeBag = DisposeBag()
    let dataSource = Observable<[MyModel]>.just([
        MyModel(title: "Item 1"),
        MyModel(title: "Item 2"),
        MyModel(title: "Item 3")
    ])
}

struct MyModel {
    let title: String
}

위의 코드 예제를 참고하여 RxCocoa를 이용한 테이블뷰와 컬렉션뷰의 처리 방법을 적용해 보세요. RxCocoa의 다양한 기능을 활용하여 더욱 효과적인 iOS 애플리케이션을 개발할 수 있습니다.

테이블뷰

컬렉션뷰

참고 자료