[RxSwift Community] RxDataSource Basic편

RxDataSource Github: https://github.com/RxSwiftCommunity/RxDataSources

RxSwiftCommunity/RxDataSources

*예제코드는 아래 Github에 있습니다. 참고하세요:)

https://github.com/Developer-Paul-t/RxSwift

Developer-Paul-t/RxSwift

이번에는 RxSwift에서 TableView 및 CollectionView를 더 Rx답게 사용하는 라이브러리를 살펴보자. 만약 테이블뷰에 데이터를 바인딩 할 때 하나의 섹션에 출력만 하는 거라면 RxCocoa가 제공하는 extension으로 충분하다. 하지만 두 개 이상의 section을 구현해야 한다면, 또 테이블과 컬렉션의 row를 추가 • 삭제 • 수정 기능(적절한 애니메이션 효과까지)을 예정 중이라면 RxDataSources 사용을 고려하면 좋다. 좀 긴 글이 될 것 같지만, 차근차근 풀어가보자.

 

 

1. RxCocoa와 RxDataSources Binding 비교

 

먼저 RxCocoa 코드를 보자.

 

 

[String]을 방출하는 observable이 data에 선언되어있고, bint(to:)로 tableView와 바인딩하고 있다. 결과로 tableview에 문자열 배열이 순서대로 출력된다. 아주 간단한 예제이기 때문에 문제가 없어 보이지만 섹션을 사용한다던지, 데이터를 추가, 수정, 삭제하는 경우, 셀의 애니메이션을 사용하고 싶은 복잡한 경우에는 답이 없는 구현 방식이다.

 

다음으로 RxDataSources 코드를 보자.

 

 

언뜻보면 복잡해보이지만, 섹션을 구성하고 추가, 수정, 삭제, 애니메이션까지 고려한다면 결코 긴 코드는 아니다.

 

2. RxDataSource 사용법 - Basic편

tableView에 뿌려줄 데이터를 위해서 Student 구조체를 선언하고, StudentSection을 만들어서 Section 안에서 데이터(item)가 관리되도록 한다. 여기서 header는 실제로 section header title에 들어가는 프로퍼티다. 그리고 extension을 통해 SectionModelType protocol을 채택하는데, 보시다시피 init()을 꼭 구현해서 프로토콜을 준수하도록 한다.

 

 

이렇게 SectionModel을 만들고 SectionModelType protocol을 준수하는게 첫 번째 과정이다. 이렇게 SectionModelType을 준수한 구조체는 SectionModel로서 활동할 준비가 완료되었다.

 

다음 작업은 가장 중요한 dataSource 객체를 생성하는 것이다.

 

 

위의 코드처럼 dataSource 객체를 생성하는 것은 RxTableViewSectionedReloadDataSource 클래스이다. 이 클래스는 SectionModelType을 타입으로 받는다. SectionModel이 이 타입을 준수하고 있으므로 우리가 이전에 만든 StudentSection을 쏙 집어 넣어주면 된다. 만약 섹션을 사용하지 않으면(섹션이 하나인 경우), 그냥 Rxcocoa만 사용해서 구현하면 된다.

 

 

이 클래스는 TableViewSectionedDataSource라는 클래스를 상속 받고 있는데, 때문에 아래의 파라미터를 사용해 초기화할 수 있다. 하지만 이번에는 Basic이니 configurationCell만 이용해보자.

 

 

configureCell은 dataSource, tableView, indexPath, item(Student)를 파라미터로 받아 Cell을 리턴하는 클로저다.  우리는 위처럼,  저 네 파라미터를 통해 우리가 원하는 Cell을 구성하고 리턴하면 된다.

 

마지막으로는 데이터를 뷰에 바인딩하는 작업이 남았다.

 

 

더미데이터를 만들고 해당 데이터를 방출하는 observable과 테이블뷰를 바인딩 한 뒤, 마지막 dataSource 파라미터에 우리가 구성한 dataSource(RxTableViewSectionedReloadDataSource의 객체)를 넣어주면 섹션과 셀이 있는 테이블뷰를 구성할 수 있다.

 

 

 

다음 시간에는 AnimatableDataSource, Custom Cell, header와 footer까지 이용해서 RxDataSource를 마스터(?) 해보자.

 

* 미리 읽기 : RxDataSources는 두 가지 특별한 타입의 data source를 제공한다. 바로 자동으로 애니메이션 관리를 해주는 RxTableViewSectionedAnimatedDataSource, RxCollectionViewSectionedAnimatedDataSource 다. 아무튼 이 애니메이션이 포함된 data source를 사용하기 위해서는 몇 가지 과정이 더 필요하다. 다음 글에서 알아보자.