[swift] RxDataSources의 다양한 UI 컴포넌트 활용 방법

28 Nov 2023

swift

RxDataSources는 Swift에서 Reactive Programming을 적용한 데이터 소스 패턴을 제공하는 라이브러리입니다. 이 라이브러리를 사용하면 UITableView, UICollectionView 등의 UI 컴포넌트에서 데이터 소스를 간편하게 관리할 수 있습니다. 이번 글에서는 RxDataSources를 활용하여 다양한 UI 컴포넌트를 사용하는 방법에 대해 알아보겠습니다.

UITableView

기본 사용법

UITableView에 RxDataSources를 적용하기 위해서는 아래와 같이 설정해야 합니다.

import RxSwift
import RxDataSources

let disposeBag = DisposeBag()
let tableView = UITableView()

// 데이터 소스 타입 정의
typealias MySection = AnimatableSectionModel<String, String>
let sections = [
    MySection(model: "Section 1", items: ["Item 1-1", "Item 1-2"]),
    MySection(model: "Section 2", items: ["Item 2-1", "Item 2-2"])
]

// RxDataSources를 사용하여 테이블 뷰에 데이터 바인딩
Observable.just(sections)
    .bind(to: tableView.rx.items(dataSource: dataSource))
    .disposed(by: disposeBag)

위 코드에서 MySection은 섹션의 모델 타입을 정의한 것입니다. 이 모델 타입은 AnimatableSectionModel을 상속하며, 섹션의 타이틀과 해당 섹션에 속한 아이템들을 갖습니다.

커스텀 셀

RxDataSources를 사용하면 각 셀을 커스텀할 수 있습니다. 아래는 커스텀 셀을 사용하는 예시입니다.

tableView.rx
    .modelSelected(String.self)
    .subscribe(onNext: { item in
        print("Selected item: \(item)")
    })
    .disposed(by: disposeBag)

// 셀 설정
dataSource.configureCell = { (_, tableView, indexPath, item) in
    let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as! CustomTableViewCell
    cell.configure(with: item)
    return cell
}

위 코드에서는 configureCell 클로저를 사용하여 각 셀의 설정을 할 수 있습니다. 이를 활용하여 커스텀 셀의 레이아웃 및 데이터 바인딩을 처리할 수 있습니다.

UICollectionView

기본 사용법

UICollectionView에서 RxDataSources를 사용하는 방법은 UITableView와 유사합니다. 아래와 같이 설정할 수 있습니다.

import RxSwift
import RxDataSources

let disposeBag = DisposeBag()
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())

// 데이터 소스 타입 정의
typealias MySection = AnimatableSectionModel<String, String>
let sections = [
    MySection(model: "Section 1", items: ["Item 1-1", "Item 1-2"]),
    MySection(model: "Section 2", items: ["Item 2-1", "Item 2-2"])
]

// RxDataSources를 사용하여 컬렉션 뷰에 데이터 바인딩
Observable.just(sections)
    .bind(to: collectionView.rx.items(dataSource: dataSource))
    .disposed(by: disposeBag)

커스텀 셀

UICollectionView에서도 RxDataSources를 사용하여 각 셀을 커스텀할 수 있습니다. 아래는 커스텀 셀을 사용하는 예시입니다.

collectionView.rx
    .modelSelected(String.self)
    .subscribe(onNext: { item in
        print("Selected item: \(item)")
    })
    .disposed(by: disposeBag)

// 셀 설정
dataSource.configureCell = { (_, collectionView, indexPath, item) in
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath) as! CustomCollectionViewCell
    cell.configure(with: item)
    return cell
}

결론

RxDataSources는 Swift에서 Reactive Programming을 적용한 데이터 소스 패턴을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. 이를 활용하여 UITableView, UICollectionView 등의 UI 컴포넌트의 데이터 소스를 효율적으로 관리할 수 있습니다. 위에서 설명한 방법들을 활용하여 프로젝트에 적용해보세요.

UITableView

기본 사용법

커스텀 셀

UICollectionView

기본 사용법

커스텀 셀

결론

참고 자료