[swift] RxDataSources와 함께 사용할 UI 디자인 패턴

28 Nov 2023

swift

1. 소개

UI 디자인 패턴은 앱 개발에서 중요한 부분이며, 코드의 구조를 단순화하고 유지 관리를 용이하게 해줍니다. 이러한 UI 디자인 패턴 중 MVVM(Model-View-ViewModel)은 데이터의 흐름과 화면 간의 상호작용을 분리하여 코드의 재사용성과 테스트 용이성을 높여줍니다. 이번 글에서는 MVVM 디자인 패턴을 RxSwift와 함께 사용하여 UI 구현을 쉽게 할 수 있는 RxDataSources에 대해 알아보겠습니다.

2. MVVM 디자인 패턴

MVVM 디자인 패턴은 Model, View, ViewModel로 구성되며, 각각의 역할은 다음과 같습니다.

Model: 앱의 비즈니스 로직을 담당하는 데이터 모델
View: UI 요소를 구성하고 사용자에게 보여주는 역할
ViewModel: View와 Model 사이에서 데이터의 변환과 처리를 담당하는 역할

MVVM 패턴은 View와 ViewModel 사이에 양방향 바인딩을 통해 데이터를 동기화합니다. ViewModel은 Model로부터 데이터를 받아와 View에 전달하고, 사용자의 입력을 처리하여 필요한 작업을 Model에게 요청합니다. 이를 통해 UI와 비즈니스 로직을 독립적으로 작성하고 재사용성을 높일 수 있습니다.

3. RxSwift와 함께 사용하기

UI 디자인 패턴을 RxSwift와 함께 사용하면 데이터의 변화를 쉽게 감지하고 반응할 수 있습니다. RxSwift는 ReactiveX의 Swift버전으로, Observable과 순수함수를 결합하여 코드의 간결성과 가독성을 높여줍니다. ViewModel에서는 RxSwift의 Observable을 사용하여 데이터의 변화를 감지하고 View에 반영합니다.

4. RxDataSources를 사용한 UICollectionView 예제

import UIKit
import RxSwift
import RxDataSources

struct SectionModel {
    var items: [Item]
}

struct Item {
    let title: String
}

class CollectionViewController: UIViewController {
    @IBOutlet weak var collectionView: UICollectionView!
    
    private let disposeBag = DisposeBag()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let dataSource = RxCollectionViewSectionedReloadDataSource<SectionModel> { (dataSource, collectionView, indexPath, item) -> UICollectionViewCell in
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! CollectionViewCell
            cell.titleLabel.text = item.title
            return cell
        }
        
        let sectionsRelay = BehaviorRelay<[SectionModel]>(value: [SectionModel(items: [Item(title: "Item 1"), Item(title: "Item 2"), Item(title: "Item 3")])])
        
        sectionsRelay
            .bind(to: collectionView.rx.items(dataSource: dataSource))
            .disposed(by: disposeBag)
    }
}

5. RxDataSources를 사용한 UITableView 예제

import UIKit
import RxSwift
import RxDataSources

struct SectionModel {
    var items: [Item]
}

struct Item {
    let title: String
}

class TableViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    
    private let disposeBag = DisposeBag()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let dataSource = RxTableViewSectionedReloadDataSource<SectionModel> { (dataSource, tableView, indexPath, item) -> UITableViewCell in
            let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
            cell.textLabel?.text = item.title
            return cell
        }
        
        let sectionsRelay = BehaviorRelay<[SectionModel]>(value: [SectionModel(items: [Item(title: "Item 1"), Item(title: "Item 2"), Item(title: "Item 3")])])
        
        sectionsRelay
            .bind(to: tableView.rx.items(dataSource: dataSource))
            .disposed(by: disposeBag)
    }
}

6. 결론

RxDataSources는 RxSwift와 결합하여 UICollectionView와 UITableView의 데이터 소스를 쉽게 구현할 수 있도록 도와줍니다. MVVM 디자인 패턴과 함께 사용하면 데이터의 변화를 감지하여 UI에 반영하는 작업을 쉽게 할 수 있습니다. 앱 개발에서 UI 구현을 간단하고 효율적으로 할 수 있는 RxDataSources를 활용해보세요.

목차