[RxSwift] RxDataSource 입문 해보기(feat.MVVM)

안녕하세요.

오늘은 RxDataSource에 대해서 정리해보려고 합니다.

RxDataSource를 학습하고 간단한 예제를 만들어봤습니다.

RxDataSource라는 라이브러리는 RxSwift를 공부하기 시작할 때부터 알고는 있었지만 

회사나 개인 프로젝트에서 사용해 본 적이 없었습니다.

이번에 여러 개의 섹션이 필요한 작업이 있어 간단하게 학습하고 예제를 통해서 입문하는 시간을 가졌습니다. 

 

RxDataSource?

기존에 사용했던 코드를 살펴보면 ( RxSwift, RxCocoa ) 아래와 같습니다.

tasks
  .bind(to: taskTableView.rx.items(cellIdentifier: TaskTableViewCell.identifier, cellType: TaskTableViewCell.self)) { (index, item, cell) in
      cell.setDataSource(task: item)
   }
   .disposed(by: disposeBag)

DataSource를 채택하지 않아도 사용할 수 있기 때문에 코드를 관리하기 편한 장점을 가지고 있습니다.

하지만 저의 경우처럼 여러 개의 섹션을 구현해야 한다면 위의 코드로는 동작이 어렵습니다.

추가적으로 위의 코드는 reloadData를 이용해 데이터를 바인딩하고 있기 때문에

애니메이션을 추가할 수가 없는 단점도 존재합니다.

 

이에 대한 보완점을 가지고 있는 것이 바로 RxDataSource입니다.

기존에 rx.items에 접근하면 두 개의 자동완성이 등장하는데

하나는 cellIdentifier이고 하나는 dataSource입니다.

이 dataSource에 들어가는 것을 구현해 위의 단점을 해결할 수 있습니다.

 

사용방법

RxDataSource에는 UITableview에 대한 RxTableViewSectionedReloadDataSource를, UICollectionview에는 RxCollectionViewSectionedReloadDataSource라는 클래스를 제공함으로써 섹션의 DataSource를 관리할 수 있게 도와줍니다. 여기에 reload가 아닌 animated로 변경된 클래스가 존재하는데 이는 앞서 말한 것처럼 애니메이션을 추가하거나 설정할 수 있게 도와주는 클래스입니다.

DataSource가 어떤 형태로 되어있는지 살펴보겠습니다.

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

SectionModel이라는 구조체를 통해 해당 섹션의 모델 데이터를 정의할 수 있습니다.

물론 기본적으로 제공하는 구조체이기 때문에 자체적으로 커스텀한 모델이 필요하다면

public protocol SectionModelType {
    associatedtype Item

    var items: [Item] { get }

    init(original: Self, items: [Item])
}

위의 프로토콜을 채택하고 구현하면 됩니다.

아래는 예시 코드입니다.

struct CustomData {
    let id: String
    let name: String
}

struct CustomDataSection {
    var header: String
    var items: [CustomData]
}

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

이렇게 섹션 모델을 구현했다면 앞서 설명한 DataSource 코드에 그대로 적용해 사용할 수 있습니다.

 

예제: 할일 목록 앱

TableView에 personal, work, shopping이라는 섹션을 가진 할 일 목록을 각각 가지고 있는

간단한 앱을 예시로 들어보겠습니다.

일단 가장 먼저 할 일 목록 모델을 정의합니다.

 

Task - 모델

struct Task: IdentifiableType, Equatable {
    let id: Int
    let title: String
    let category: TaskCategory
    
    var identity: Int {
        return self.id
    }
}

enum TaskCategory: String, IdentifiableType {
    case personal
    case work
    case shopping
    
    var identity: String {
        return self.rawValue
    }
}

앞서 말한 personal, work, shopping 세 가지의 섹션도 열거형으로 추가합니다.

 

TaskViewModel - 뷰모델

class TaskViewModel {
    
    private let tasks = BehaviorRelay<[AnimatableSectionModel<TaskCategory, Task>]>(value: [])
    
    func fetchTasks() -> Observable<[AnimatableSectionModel<TaskCategory, Task>]> {
        let personalTasks: [Task] = [
            Task(id: 1, title: "우유 사기", category: .personal),
            Task(id: 2, title: "치즈 사기", category: .personal),
        ]

        let workTasks: [Task] = [
            Task(id: 3, title: "블로그 포스팅", category: .work),
            Task(id: 4, title: "회의 참여", category: .work),
        ]

        let shoppingTasks: [Task] = [
            Task(id: 5, title: "가방 사기", category: .shopping),
            Task(id: 6, title: "아이폰15 사기", category: .shopping),
        ]

        let sections: [AnimatableSectionModel<TaskCategory, Task>] = [
            AnimatableSectionModel(model: .personal, items: personalTasks),
            AnimatableSectionModel(model: .work, items: workTasks),
            AnimatableSectionModel(model: .shopping, items: shoppingTasks),
        ]

        tasks.accept(sections)

        return tasks.asObservable()
    }
}

각각의 섹션별로 아이템을 생성하고 방출합니다. ( 서버나 데이터베이스에 있는 데이터를 가져오고 방출합니다. )

AnimatableSectionModel을 사용하셔도 되고 SectionModel을 사용하셔도 무방합니다.

 

TaskViewController - 뷰

private func bind() {
        
    let dataSource = RxTableViewSectionedAnimatedDataSource<AnimatableSectionModel<TaskCategory, Task>>(
        configureCell: { dataSource, tableView, indexPath, item in
            let cell = tableView.dequeueReusableCell(withIdentifier: "TaskCell", for: indexPath) as! TaskCell
            cell.configure(task: item)
            return cell
        },
        titleForHeaderInSection: { dataSource, index in
            return dataSource.sectionModels[index].model.rawValue
        }
    )

    viewModel.fetchTasks()
        .bind(to: tableView.rx.items(dataSource: dataSource))
        .disposed(by: disposeBag)
}

이렇게 작성하게 되면 여러개의 섹션을 한 테이블뷰에 표시할 수 있게 됩니다.

애니메이션 처리도 할 수 있다는 장점도 가지고 있으니

다음 코드를 추가하면 추가, 리로드 그리고 삭제에 관한 애니메이션이 함께 동작할 수 있게 됩니다.

dataSource.animationConfiguration = AnimationConfiguration(insertAnimation: .fade, reloadAnimation: .fade, deleteAnimation: .fade)

 

 

간단한 예제를 통해서 RxDataSource에 입문해 봤습니다.

도움이 되셨으면 좋겠습니다.

그럼 이만 👋🏻 👋🏻 👋🏻