[swift] RxDataSources의 프로토타이핑 및 프로덕션 환경에서의 사용 방법

28 Nov 2023

swift

안녕하세요! 이번에는 RxDataSources 라이브러리를 사용하여 iOS 앱에서 테이블 뷰를 구현하는 방법에 대해 알아보겠습니다. RxDataSources는 RxSwift와 함께 사용되는 데이터 소스 라이브러리로, Reactive Programming 패러다임을 따르는 앱에서 효과적으로 테이블 뷰를 처리할 수 있도록 도와줍니다.

RxDataSources 설치 및 설정

먼저, RxDataSources를 사용하기 위해 Cocoapods 또는 Swift Package Manager를 통해 프로젝트에 라이브러리를 추가해야 합니다. 프로젝트 폴더에서 터미널을 열고 다음 명령어를 실행하여 Cocoapods를 사용하는 경우 RxDataSources를 설치합니다.

pod 'RxDataSources'

Swift Package Manager를 사용하는 경우, Xcode에서 File -> Swift Packages -> Add Package Dependency를 선택한 후 다음 URL을 입력하여 RxDataSources를 추가합니다.

https://github.com/RxSwiftCommunity/RxDataSources.git

설치 후에는 임포트 문을 통해 RxDataSources를 가져와 사용할 준비가 끝났습니다.

import RxDataSources

프로토타이핑 환경에서의 사용

프로토타이핑 단계에서는 테이블 뷰의 데이터 소스와 델리게이트를 따로 구현하는 것은 번거롭고 시간이 많이 소요될 수 있습니다. 이때 RxDataSources를 사용하면 데이터 소스를 간단하게 구현할 수 있습니다.

먼저, struct 형태로 테이블 뷰의 섹션과 아이템 모델을 정의합니다.

struct SectionModel {
    var items: [String]
}

extension SectionModel: SectionModelType {
    typealias Item = String
    
    init(original: SectionModel, items: [Item]) {
        self = original
        self.items = items
    }
}

그리고 테이블 뷰 컨트롤러에서는 아래와 같이 tableView: UITableView 프로퍼티를 선언하고, 데이터 소스와 델리게이트를 설정합니다.

let tableView = UITableView()
let dataSource = RxTableViewSectionedReloadDataSource<SectionModel>(configureCell: { (dataSource, tableView, indexPath, item) -> UITableViewCell in
    let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
    cell.textLabel?.text = item
    return cell
})

Observable.just([SectionModel(items: ["Item 1", "Item 2", "Item 3"])])
    .bind(to: tableView.rx.items(dataSource: dataSource))
    .disposed(by: disposeBag)

위 코드에서 configureCell 클로저를 통해 각 셀의 컨텐츠를 설정하고, tableView.rx.items(dataSource: dataSource)를 통해 데이터 소스를 연결합니다. 그리고 마지막으로 Observable.just를 사용하여 테이블 뷰에 데이터를 바인딩합니다.

프로덕션 환경에서의 사용

프로덕션 환경에서는 보통 테이블 뷰의 데이터 소스와 델리게이트를 분리하여 구현하는 것이 좋습니다. 이때에도 RxDataSources를 사용하면 Reactive Programming과 함께 명확하고 간결한 코드를 작성할 수 있습니다.

테이블 뷰 컨트롤러에서 아래와 같이 RxTableViewSectionedDataSource 인스턴스를 생성하고, 데이터 소스와 델리게이트를 설정합니다.

let tableView = UITableView()
let dataSource = RxTableViewSectionedDataSource<SectionModel>(configureCell: { (dataSource, tableView, indexPath, item) -> UITableViewCell in
    let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
    cell.textLabel?.text = item
    return cell
})

Observable.just([SectionModel(items: ["Item 1", "Item 2", "Item 3"])])
    .bind(to: tableView.rx.items(dataSource: dataSource))
    .disposed(by: disposeBag)

tableView.rx.modelSelected(String.self)
    .subscribe(onNext: { item in
        // 셀 선택 시 처리하는 로직 작성
    })
    .disposed(by: disposeBag)

위 코드에서 configureCell 클로저를 통해 셀의 컨텐츠를 설정하고, tableView.rx.items(dataSource: dataSource)를 통해 데이터 소스를 연결합니다. 또한 tableView.rx.modelSelected를 통해 셀 선택 시 해당 아이템을 처리할 로직을 작성할 수 있습니다.

결론

RxDataSources를 사용하면 프로토타이핑 및 프로덕션 환경에서의 테이블 뷰 구현이 간편해집니다. Reactive Programming 패러다임과 결합하여 더욱 강력하고 효율적인 코드를 작성할 수 있습니다. 참고 자료로 아래 링크를 확인해보세요.