[iOS/RxSwift] RxDataSource - UITableView, UICollectionView

RxSwift

 

RxSwift 에서 DataSource 를 설정하는 방법을 정리해보려고 합니다!

 

UIKit 의 UITableView, UICollectionView 를 이용할 때에는 각 리스트에 대한 데이터를 표현하기 위해 data source 를 지정해줘야 하는데요. 기본적으로는 data source 프로토콜을 채택해, 메소드를 구현해 데이터를 표현합니다. RxSwift 와 RxDataSource 에서는 data source 메소드를 직접 구현하지 않고 쉽게 사용할 수 있도록 오퍼레이터를 제공합니다.

---

1. UIKit 에서 data source 를 설정하는 방법

2. RxSwift 에서 data source 를 설정하는 방법

3. RxDataSource 를 이용해 data source 를 설정하는 방법

---

1. UIKit 에서 data source 를 설정하는 방법

 

UIKit 의 UITableView, UICollectionView 를 이용할 때에는 각 리스트에 대한 데이터를 표현하기 위해 data source 를 지정해줘야 하는데요. 기본적으로는 data source 프로토콜을 채택해, 메소드를 구현해 데이터를 표현합니다.

 

TableView, CollectionView 의 data source 프로토콜은 두가지 메소드를 반드시 구현해야합니다.

 

• 데이터의 개수가 몇 개인지
  - tabelView(_:numberOfRowsInSection:)
  - collectionView(_:numberOfItemsInSection:)
• 데이터의 각 셀을 어떻게 표현할지
  - tabelView(_:cellForRowAt:)
  - collectionView(_:cellForItemAt:)
• UITableViewDataSource
• UICollectionViewDataSource

---

2. RxSwift 에서 data source 를 설정하는 방법

 

RxCocoa (RxSwift) 에서는 TableView, CollectionView 의 data source, delegate 프로토콜로 설정했던 메소드들을 오퍼레이터로 제공해요. data source 프로토콜을 채택해 메소드를 구현하고 설정하는 과정이 번거롭다고 여겨져 제공하는 것이라고 생각합니다 !

 

제공하는 오퍼레이터는 rx.items 로, 매개변수의 타입이 여러가지 형태로 제공됩니다.

rx.items(dataSource:protocol<RxTableViewDataSourceType, UITableViewDataSource>)
rx.items(cellIdentifier:String)
rx.items(cellIdentifier:String:Cell.Type:_:)
rx.items(_:_:)

 

RxCocoa 의 오퍼레이터를 이용해 tableView, collectionView 의 데이터를 표현하는 방법은 다음과 같습니다.

 

• TableView 에 보여줄 데이터를 Observable 형태로 변환하기 (data stream)
• 데이터 스트림에 items 오퍼레이터를 바인딩한다.
• items 오퍼레이터에 각 셀을 어떻게 표현할지 작성한다.

let members = Observable<String>.just(["Song", "Kim", "Lee"])

members.bind(to: tableView.rx.items(cellIdentifier: MemberCell.identifier))
    { index, member, cell in
    	cell.initUI(of: member)
    }
    .disposed(by: bag)

---

3. RxDataSource 를 이용해 data source 를 설정하는 방법

 

RxCocoa 에서도 data source 에 대해 충분히 오퍼레이터를 제공하는 것 같지만, 왜 RxDataSource 를 만들었을까? RxDataSource 에서 지적하는 rx.items 오퍼레이터의 문제점은 다음과 같아요.

 

• 여러 Section 에 대해 데이터 셋을 바인딩하기 어렵다.
• 아이템 추가 / 수정 / 삭제 등에 애니메이션을 적용하기 어렵다.

 

RxDataSource 는 위의 문제점들을 해결하기 위한 라이브러리입니다! 해당 라이브러리에서 제공하는 오퍼레이터와 프로토콜, 클래스는 다음과 같아요.

 

• rx.items(dataSource:) 오퍼레이터를 제공한다.
• 여러 Section 에 대해 데이터를 설정할 수 있는 SectionModelType 프로토콜을 제공한다.
• Section 에 대한 설정, Animation 을 적용할 수 있는 DataSource 클래스를 제공한다.

 

RxDataSource 를 이용해 TableView, CollectionView 의 data source 설정하는 방법은 다음과 같습니다.

 

• Data 를 보여줄 Custom Model 을 생성한다. 
• Section 을 정의하기 위해 SectionModelType 프로토콜을 채택하는 구조체를 생성한다.
• Section 구조체 타입을 인자로 할당해 Data Source 클래스의 인스턴스를 생성한다.
• rx.items(dataSource:) 오퍼레이터를 통해 data source 를 설정한다.

let dataSource = RxTableViewSectionedReloadDataSource<SectionOfCustomData>(
  configureCell: { dataSource, tableView, indexPath, item in
    let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
    cell.textLabel?.text = "Item \(item.anInt): \(item.aString) - \(item.aCGPoint.x):\(item.aCGPoint.y)"
    return cell
})

dataSource.titleForHeaderInSection = { dataSource, index in
  return dataSource.sectionModels[index].header
}

dataSource.canEditRowAtIndexPath = { dataSource, indexPath in
  return true
}

 

# SectionModelType 프로토콜

 

• 섹션이 나타낼 데이터 타입을 Item typealias 로 정의한다.
• 섹션이 나타낼 데이터를 저장하기 위한 items 속성을 정의한다.

 

# Data Source 클래스

 

• Data Source 클래스는 애니메이션을 포함하는지에 따라 구분된다.
  - RxTableViewSectionedReloadDataSource, RxTableViewSectionedAnimatedDataSource
  - RxCollectionViewSectionedReloadDataSource, RxCollectionViewSectionedAnimatedDataSource
• Data Source 클래스 인스턴스를 생성할 때 SectionModelType 프로토콜을 채택하는 구조체를 제너릭 타입으로 지정한다.
• Data Source 클래스는 configureCell 을 기본 인자로 갖는다.
  - 그 외에 titleForHeaderInSection, titleForFooterInSection, canEditRowAtIndexPath, canMoveRowAtIndexPath 등의 인자를 갖는다.
• 해당 인자들은 인스턴스 속성값을 통해 설정할 수 있다.
• 애니메이션을 설정하기 위해서는 AnimatedDataSource 를 이용한다.
  - 해당 클래스는 animationConfiguration, decideViewTransition 인자를 추가로 갖는다.
  - AnimationConfiguration 는 insert, reload, delete 시에 애니메이션을 설정할 수 있다. 

---

참고 링크

• RxSwift 공식문서
• RxDataSources 공식문서
• [RxSwift] TableView, CollectionView in RxCocoa