들어가며
MVVM 패턴 - 양방향 바인딩 with Vanilla Swift 에서 라이브러리를 사용하지 않고 바인딩을 구현했습니다. 이번엔 RxSwift를 사용해서 바인딩을 구현해보도록 하겠습니다.
저희가 만들어볼 앱은 서버로부터 이미지를 가져와서 화면에 그려주는 앱입니다.
가져올 이미지의 숫자를 화살표 버튼을 통해서 변경할 수 있고, 이미지 불러오기 버튼을 누르면 이미지를 가져오게 됩니다. 완성하고 나면 이렇게 작동할 겁니다.
UI 관련 코드, 네트워크 통신 코드에 대한 설명은 하지 않겠습니다. 레포를 참고해주세요.
ViewModel 구성하기
MVVM에서 ViewModel은 ViewController없이도 돌아갈 수 있어야 합니다.
즉, ViewModel 내부에 있는 로직은 View와는 상관없이 실행할 수 있는 로직이어야 합니다.
그렇기 때문에, 우리는 ViewModel부터 구성을 해줍시다.
우리가 만들고자 하는 ViewModel은 3가지 책임을 질 줄 알아야 합니다.
1.
이미지 갯수 변경하기(handleCount)
2.
이미지 가져오기(fetchImage)
3.
이미지의 현재 페이지 변경하기(handleCurrentPage)
그럼 책임을 코드로 작성해봅시다.
1.
이미지 갯수 변경하기
우리는 이미지 count를 가지고 있다가 count를 올려라, 혹은 내려라 라는 명령이 들어오면 count를 올리든, 내리든 할 겁니다. 그러면 우리는 count를 올리든, 내리든을 매개변수로 받아야 겠네요. 저는 Direction이라는 enum 타입을 만들었습니다.
enum Direction {
case left, right
}
Swift
복사
그리고 Direction를 매개 변수로 받을 수 있는 메서드를 만들었습니다.
func handleCount(with direction: Direction) {
// TODO: - Count 값 계산
// TODO: - Count 값 Stream으로 보내기
}
Swift
복사
그리고, 해당 direction를 받아서 count를 처리해줄 겁니다. count를 계산해주는 메서드를 하나 만들었습니다. 해당 메소드는 direction를 인수로 넣어주면 Int 타입을 반환해줍니다. 계산된 count 겠죠.
private func calculateCount(with direction: Direction) -> Int {
var currentValue = // TODO: - currentValue 설정
switch direction {
case .left:
guard currentValue > 1 else { return 1 }
currentValue -= 1
case .right:
currentValue += 1
}
return currentValue
}
Swift
복사
calculateCount 메서드는 handleCount에서 TODO: - Count 값 계산에 해당되는 일을 해주는 메서드입니다. 따라서, 저 부분에 Count 계산을 하고 계산한 값을 가지고 오는 코드를 작성해줍니다.
func handleCount(with direction: Direction) {
let count = self.calculateCount(with: direction)
// TODO: - Count 값 Stream으로 보내기
}
Swift
복사
이제 Count 값을 Stream으로 보내는 부분과 Count를 설정해주는 부분이 필요하겠네요. 두 가지를 모두 충족시킬 수 있는 방법을 사용해보려고 합니다. BehaviorRelay를 사용해서 구현해줄게요.
일단, BehaviorRelay를 하나 만들어 주겠습니다. BehaviorRelay는 default 값을 가질 수 있습니다. default 값은 1로 설정하겠습니다.
let countRelay: BehaviorRelay<Int> = BehaviorRelay(value: 1)
Swift
복사
BehaviorRelay, BehaviorSubject는 가지고 있는 값을 가져올 수 있습니다. 따라서, BehaviorRelay가 가지고 있는 값을 가져와서 currentValue로 써줄 겁니다.
private func calculateCount(with direction: Direction) -> Int {
var currentValue = self.countRelay.value
switch direction {
case .left:
guard currentValue > 1 else { return 1 }
currentValue -= 1
case .right:
currentValue += 1
}
return currentValue
}
Swift
복사
마지막으로 BehaviorRelay Stream으로 Count 값을 보내줍시다.
func handleCount(with direction: Direction) {
let count = self.calculateCount(with: direction)
self.countRelay.accept(count)
}
Swift
복사
보내진 값은 어딘가에서 사용하겠죠. ViewModel은 자기 할 일을 했으니 더이상 신경쓰지 않아도 됩니다.
2.
이미지 가져오기
이미지를 가져오기 위해서는 service가 필요합니다. 저는 UnsplashService라는 구조체를 하나 만들어 뒀습니다. 해당 구조체에는 이미지의 URL를 가져올 수 있는 메서드가 있습니다. 해당 메서드는 String 타입의 배열을 반환합니다.
func imageURLs(count: Int) async -> [String] {
do {
let images = try await self.unsplashAPI.fetchRandomImages(count: count)
let imageURLs = images?.compactMap { $0.urls?.regular }
return imageURLs ?? []
} catch {
return []
}
}
Swift
복사
해당 메서드에서는 필요한 것이 있습니다. 바로, 가져올 페이지의 수 입니다. 우리가 1번에서 count 값을 가지고 있는 BehaviorRelay를 만들었습니다. BehaviorRelay를 사용해서 count 값을 가지고 옵시다.
func fetchImage() {
Task {
let count = self.countRelay.value
let urls = await self.service.imageURLs(count: count)
// TODO: - image urls Stream에 보내기
}
}
Swift
복사
마지막으로 service를 통해서 가져온 이미지를 올릴 Stream이 필요합니다.
이번에도 BehaviorRelay를 사용해서 String 타입의 배열을 받는 Stream를 만들어 줬어요.
let imageUrlRelay: BehaviorRelay<[String]> = BehaviorRelay(value: [])
Swift
복사
이제 Relay를 사용해서 받은 URL를 Stream에 올려줍시다.
func fetchImage() {
Task {
let count = self.countRelay.value
let urls = await self.service.imageURLs(count: count)
self.imageUrlRelay.accept(urls)
}
}
Swift
복사
3.
이미지의 현재 페이지 변경하기
이번에는 width와 offset를 받아서 현재 페이지를 계산해주는 메서드를 만들겁니다.
해당 메서드는 width, offset를 매개변수로 받고 이를 계산해서 그 값을 Stream으로 보내주면 됩니다.
func handleCurrentPage(with width: Double, _ offset: Double) {
let currentPage = Int(offset / width)
// TODO: - current page stream에 보내기
}
Swift
복사
Stream에 현재 페이지를 보내 보겠습니다. 이 부분은 default 값이 굳이 필요하지 않아서 PublishRelay로 하겠습니다.
let currentPageRelay: PublishRelay<Int> = PublishRelay()
Swift
복사
그리고 메서드에 적용해주겠습니다.
func handleCurrentPage(with width: Double, _ offset: Double) {
let currentPage = Int(offset / width)
self.currentPageRelay.accept(currentPage)
}
Swift
복사
ViewModel이 완성되었습니다. ٩(ˊᗜˋ*)و
ViewController 구성하기
이번엔 ViewController 내부를 구성해볼게요. ViewController는 ViewModel를 소유하고 있습니다. ViewModel에 트리거를 보내고 ViewModel의 데이터가 변경되는지 지켜보고 있다가 데이터가 변경되면 화면을 바꾸는 것도 ViewController가 하는 일입니다. 따라서, ViewController는 ViewModel를 가지고 있어야 합니다.
private let viewModel: ViewModel = ViewModel(service: UnsplashService())
Swift
복사
우선, ViewModel에게 트리거를 보내는 부분부터 만들어 주겠습니다.
ViewController에서 받는 Input은 총 4가지 입니다.
1.
왼쪽 화살표 버튼 누르기
2.
오른쪽 화살표 버튼 누르기
3.
이미지 불러오기 버튼 누르기
4.
콜렉션 뷰 스크롤하기
4가지 Input를 위한 코드를 작성해보겠습니다.
1.
왼쪽 화살표 버튼 누르기
RxCocoa는 Cocoa Framework 관련하여 유용하게 사용할만한 부분들을 제공해줍니다. 버튼의 터치를 감지하는 부분도 마찬가지입니다. 버튼에서 .touchUpInside 이벤트를 감지하도록 했습니다. 해당 이벤트가 발생하면 스트림으로 이벤트가 내려갈겁니다.
self.leftButton.rx.controlEvent(.touchUpInside)
Swift
복사
해당 이벤트가 발생하면 우리는 ViewModel에서 Count를 다루는 부분으로 이벤트가 일어났다는걸 알려줘야 합니다. 아까 우리가 만들었던 handleCount로 보내면 되겠네요. 인수로 어느 방향인지 보낼 수 있기 때문에, .left 라고 작성하면 될 것 같습니다.
self.leftButton.rx.controlEvent(.touchUpInside)
.bind { [weak self] _ in self?.viewModel.handleCount(with: .left) }
.disposed(by: self.disposeBag)
Swift
복사
하나만 더 추가해볼게요. 바로, withUnretained 입니다. RxSwift6부터 적용되는 이 연산자는 매번 [weak self]를 작성해야 하는 문제를 해결해줍니다. withUnretained를 사용하게 되면 [weak self] 없이 코드를 작성할 수 있습니다.
self.leftButton.rx.controlEvent(.touchUpInside)
.withUnretained(self)
.bind { owner, _ in owner.viewModel.handleCount(with: .left) }
.disposed(by: self.disposeBag)
Swift
복사
2.
오른쪽 화살표 버튼 누르기
오른쪽 화살표는 왼쪽 화살표와 동일하게 작성하되, handleCount에 들어가는 인수만 변경해주면 되겠죠?
self.rightButton.rx.controlEvent(.touchUpInside)
.withUnretained(self)
.bind { owner, _ in owner.viewModel.handleCount(with: .right) }
.disposed(by: self.disposeBag)
Swift
복사
3.
이미지 불러오기 버튼 누르기
이미지 불러오기 버튼을 누르면 ViewModel에 만들어 두었던 이미지를 불러오는 메서드가 불려야 합니다. 따라서, 해당 메서드를 호출해줍시다.
self.submitButton.rx.controlEvent(.touchUpInside)
.withUnretained(self)
.bind { owner, _ in owner.viewModel.fetchImage() }
.disposed(by: self.disposeBag)
Swift
복사
4.
콜렉션 뷰 스크롤하기
우리는 사용자가 콜렉션 뷰를 스크롤하면 해당 페이지가 몇번째 페이지인지 계산해서 pageControl로 보여주려고 합니다. 따라서, 스크롤을 감지할 필요가 있습니다.
RxCocoa는 CollectionViewDelegate에 있는 메서드들도 지원해줍니다. 그 중 didScroll를 사용해볼게요.
self.photoCollectionView.rx.didScroll
Swift
복사
우리는 스크롤 이벤트가 발생하면 해당 이벤트를 스트림으로 내려줍니다. 해당 이벤트는 ViewModel에 있는 handleCurrentPage를 호출해야 합니다. 해당 메서드는 두가지 인수를 필요로 합니다. width와 offset 입니다. 현재 콜렉션 뷰에서 두 값을 빼서 인수로 넣어줍니다.
self.photoCollectionView.rx.didScroll
.withUnretained(self)
.bind { owner, _ in
let width = owner.photoCollectionView.frame.width
let offset = owner.photoCollectionView.contentOffset.x
owner.viewModel.handleCurrentPage(with: width, offset)
}
.disposed(by: self.disposeBag)
Swift
복사
Input를 다 만들었으니 Output를 받는 부분을 만들어 보겠습니다.
ViewModel로부터 받을 수 있는 값은 총 3가지 입니다.
1.
countRelay(Int)
2.
currentPageRelay(Int)
3.
imageUrlRelay([String])
각각의 Stream에서 나오는 값을 UI Component에서 받아서 사용할 수 있도록 연결시켜보겠습니다.
1.
countRelay
countRelay에서 나오는 Count값은 라벨에다가 보여주어야 합니다. 라벨에 올리기 위해서는 Int 타입이 아닌 String 타입이어야 합니다. 즉, 중간에 값을 가공해줄 필요가 있겠네요.
잘 가공한 값은 라벨의 text로 들어가면 됩니다.
self.viewModel.countRelay
.map { "\($0)" }
.bind(to: self.photoCountLabel.rx.text)
.disposed(by: self.disposeBag)
Swift
복사
2.
currentPageRelay
currentPageRelay에서 나오는 Count값은 pageControl의 currentPage의 값으로 들어가야 합니다. currentPage는 Int 타입을 받기 때문에 별다른 가공을 거치지 않아도 됩니다.
self.viewModel.currentPageRelay
.bind(to: self.pageControl.rx.currentPage)
.disposed(by: self.disposeBag)
Swift
복사
3.
imageUrlRelay
imageUrlRelay에서 들어온 String 타입 배열은 한 가지 컴포넌트에서만 사용하지 않습니다. 해당 값을 사용해서 CollectionView에 이미지를 올리고, PageControl의 전체 페이지 수를 변경해주어야 합니다. 따라서, imageUrlRelay를 share할 수 있도록 해줍시다.
let imageUrlRelay = self.viewModel.imageUrlRelay
.observe(on: MainScheduler.instance)
.share()
Swift
복사
imageUrlRelay에서 가져온 값은 서버를 거쳐서 오기 때문에 UI 부분으로 내려가기 전에 MainScheduler로 스레드를 변경해주었습니다.
그러면 가져온 imageUrl 배열을 사용해봅시다.
먼저, 간단하게 pageControl의 numberOfPages 값을 설정해봅시다. numberOfPages는 Int값을 받습니다. 따라서, 배열의 Count 값이 내려가도록 가공해주어야 합니다.
imageUrlRelay
.map { $0.count }
.bind(to: self.pageControl.rx.numberOfPages)
.disposed(by: self.disposeBag)
Swift
복사
CollectionView를 설정해보겠습니다. CollectionView DataSource를 사용하지 않고도 RxCocoa에 있는 요소들을 사용해서 CollectionView의 셀을 설정해줄겁니다.
items라는걸 사용해서 CollectionView의 item를 설정해줍시다.
imageUrlRelay
.bind(to: self.photoCollectionView.rx.items(cellIdentifier: PhotoCollectionViewCell.identifier,
cellType: PhotoCollectionViewCell.self)) { index, element, cell in
cell.configureCell(imageURL: element)
}
.disposed(by: self.disposeBag)
Swift
복사
View와 ViewModel이 모두 완성되었습니다.
Input / Output 으로 구성하기
이번엔 ViewModel를 보기 쉽게 정리해보려고 합니다.
Input, Output이라는 구조체를 ViewModel 내부에 넣을 겁니다. ViewModel은 Input를 받아서 Output으로 반환하는 transform이라는 메서드를 가지고서 ViewController와 소통할 겁니다.
일단, Input, Output 구조체를 만들어 보겠습니다. Input, Output은 말그대로 ViewController로부터 오는 Input, 그리고 ViewController로 보내주어야 하는 Output를 말합니다. Output으로 들어갈 값은 이전에 만든 Stream이겠네요.
struct Output {
let countRelay: BehaviorRelay<Int> = BehaviorRelay(value: 1)
let imageUrlRelay: BehaviorRelay<[String]> = BehaviorRelay(value: [])
let currentPageRelay: PublishRelay<Int> = PublishRelay()
}
Swift
복사
그럼 Input은 어떻게 구성해줘야 할까요? 위에서는 ViewController가 ViewModel의 메서드를 직접 호출해서 사용했습니다. 이번에는 ViewModel의 메서드를 직접 호출하지 않고 “버튼이 눌렸다”, “스크롤을 했다” 라는 UI 이벤트를 Stream를 통해서 전달해주려고 합니다.
호출 했던 메서드는 총 3가지 였습니다. handleCount, fetchImage, handleCurrentPage 입니다. 메서드 호출을 대신할 Stream를 만들어 보겠습니다.
struct Input {
let directionArrowDidTap: PublishRelay<Direction>
let submitDidTap: Observable<Void>
let didScroll: PublishRelay<(width: Double, offset: Double)>
}
Swift
복사
directionArrowDidTap은 handleCount를 대신하는 Stream입니다. 따라서, handleCount 대신 Direction를 받아와야 합니다. submitDidTap은 fetchImage를 대신합니다. fetchImage는 매개변수가 없기 때문에 스트림을 통해서 받아올 데이터가 없습니다. didScroll은 handleCurrentPage를 대신하는 Stream 입니다. 해당 Stream으로는 width와 offset 데이터를 가져와야 합니다.
이번엔 transform 메서드 코드를 작성해보겠습니다.
transform은 매개변수로 input를 받습니다. input를 사용해서 코드를 구성해보겠습니다.
1.
directionArrowDidTap
directionArrowDidTap으로는 Direction 데이터가 들어옵니다. 해당 데이터를 받아서 이전에 Count 계산을 해주던 메서드의 인수로 넣어줄 겁니다. 또한, 계산하는 함수 안에서 현재 Value를 직접 사용하지 말고 인수로 받아서 사용하도록 수정했습니다.
input.directionArrowDidTap
.withUnretained(self)
.bind { owner, direction in
let currentValue = owner.output.countRelay.value
let count = owner.count(with: direction, currentValue: currentValue)
// TODO: - output으로 넘겨주기
}
.disposed(by: self.disposeBag)
Swift
복사
계산이 된 count는 output를 통해서 넘겨주려고 합니다. ViewModel에 Output 인스턴스를 하나 만들고 해당 인스턴스가 가지는 countRelay로 count값을 넘겨주었습니다.
input.directionArrowDidTap
.withUnretained(self)
.bind { owner, direction in
let currentValue = owner.output.countRelay.value
let count = owner.count(with: direction, currentValue: currentValue)
owner.output.countRelay.accept(count)
}
.disposed(by: self.disposeBag)
Swift
복사
2.
submitDidTap
submitDidTap 이벤트가 발생하면 이미지를 서버로부터 가져와야 합니다. 서버로부터 이미지를 가져오기 위해서 countRelay에 있는 value를 가져와서 fetchImage 메서드로 넣었습니다.
input.submitDidTap
.withUnretained(self)
.bind { owner, _ in
let currentValue = owner.output.countRelay.value
owner.fetchImage(currentPage: currentValue)
}
.disposed(by: self.disposeBag)
Swift
복사
이전에 만들었던 fetchImage 메서드를 수정해서 service를 통해서 imageUrls를 가져오고 이를 output에 있는 imageUrlRelay로 보내는 코드를 작성해주었습니다.
private func fetchImage(currentPage: Int) {
Task {
let urls = await self.service.imageURLs(count: currentPage)
self.output.imageUrlRelay.accept(urls)
}
}
Swift
복사
3.
didScroll
didScroll에는 width와 offset이 들어옵니다. 해당 데이터를 currentPage 라는 메서드에 넣어서 계산하고 해당 메서드가 반환하는 Int 값을 받아서 output에 있는 currentPageRelay로 보내줄 겁니다.
input.didScroll
.withUnretained(self)
.bind { owner, value in
let currentPage = owner.currentPage(with: value.width, value.offset)
owner.output.currentPageRelay.accept(currentPage)
}
.disposed(by: self.disposeBag)
Swift
복사
currentPage 메서드는 이전에 handleCurrentPage에서 직접 계산하던 부분을 메서드로 따로 분리한 겁니다.
private func currentPage(with width: Double, _ offset: Double) -> Int {
return Int(offset / width)
}
Swift
복사
ViewModel 내부에 있는 Input, Output은 다 만들었네요. 이번엔 ViewController 코드를 수정해봅시다.
일단, 이전에 만들었던 이벤트들을 조금 수정해주어야 합니다. 이젠 메서드가 아니고 Stream을 Input으로 넣어줘야 합니다.
이전에 만든 Input은 총 4가지 였습니다.
1.
왼쪽 화살표 버튼 누르기
2.
오른쪽 화살표 버튼 누르기
3.
이미지 불러오기 버튼 누르기
4.
콜렉션 뷰 스크롤하기
이전에 작성해뒀던 코드를 수정해봅시다.
1.
왼쪽, 오른쪽 화살표 버튼 누르기
이전에는 왼쪽, 오른쪽 화살표 버튼을 눌렀을 때, ViewModel에 있는 메서드를 호출했습니다. 이번엔 메서드말고 Stream를 통해서 이벤트를 전달해줍시다.
일단, 왼쪽, 오른쪽 화살표 버튼을 눌렀을 때 발생하는 이벤트를 위한 통로를 만들어 줍시다. PublishRelay를 사용해줄게요. 그리고 ViewModel에 있는 Direction를 이벤트로 보내줄 겁니다.
private let directionArrowDidTapRelay: PublishRelay<ViewModel.Direction> = PublishRelay()
Swift
복사
왼쪽 버튼을 눌렀을 때, 해당 Stream으로 Direction.left 값이 전달되어야 합니다. 따라서, 이벤트 발생 시에 map에서 이벤트를 left로 가공합니다. 그리고 가공한 값을 Stream으로 전달합니다.
self.leftButton.rx.controlEvent(.touchUpInside)
.map { ViewModel.Direction.left }
.bind(to: self.directionArrowDidTapRelay)
.disposed(by: self.disposeBag)
Swift
복사
rightButton도 동일하게 적용하겠습니다.
self.rightButton.rx.controlEvent(.touchUpInside)
.map { ViewModel.Direction.right }
.bind(to: self.directionArrowDidTapRelay)
.disposed(by: self.disposeBag)
Swift
복사
2.
이미지 불러오기 버튼 누르기
이미지 불러오기 버튼을 눌렀을 때는 아무것도 보낼 것이 없습니다. 그저 버튼이 눌림 이벤트만 보내주면 됩니다. 따라서, ViewModel의 Input에 버튼 탭 이벤트 Observable를 넣어주도록 하겠습니다.
let input = ViewModel.Input(
directionArrowDidTap: self.directionArrowDidTapRelay,
submitDidTap: self.submitButton.rx.controlEvent(.touchUpInside).asObservable(),
didScroll: // TODO: - didScroll Observable
)
Swift
복사
ViewModel에 Input에 아까 만들었던 directionArrowDidTapRelay도 넣어줬습니다. 이미지 불러오기 버튼 탭 이벤트는 Observable이 아니기 때문에 asObservable를 사용해서 Observable로 변환했습니다.
3.
콜렉션 뷰 스크롤하기
콜렉션 뷰 스크롤을 했을 때 이전에는 메서드에 width, offset를 인수로 넣어 줬습니다. 이번에는 Stream으로 보내줘야 겠네요. 해당 Tuple를 담을 Relay를 만들어줬습니다.
private let didScrollRelay: PublishRelay<(width: Double, offset: Double)> = PublishRelay()
Swift
복사
그리고 콜렉션 뷰에서 didScroll 이벤트가 발생했을 때, 해당 이벤트에다가 width, offset를 보냈습니다.
self.photoCollectionView.rx.didScroll
.withUnretained(self)
.bind { owner, _ in
let width = owner.photoCollectionView.frame.width
let offset = owner.photoCollectionView.contentOffset.x
owner.didScrollRelay.accept((width, offset))
}
.disposed(by: self.disposeBag)
Swift
복사
Input에 해당 Relay를 적용해줘야겠네요.
let input = ViewModel.Input(
directionArrowDidTap: self.directionArrowDidTapRelay,
submitDidTap: self.submitButton.rx.controlEvent(.touchUpInside).asObservable(),
didScroll: self.didScrollRelay
)
Swift
복사
이제 ViewModel과 ViewController 사이에 Input를 보내는 부분은 연결이 된 것 같네요. ViewController에서 이벤트가 발생하면 ViewModel에서 메서드 내부 코드를 실행하고 Output에 있는 스트림들로 이벤트를 방출했을 겁니다. 하지만, 아직 ViewController에서 방출된 이벤트를 받지 않았기 때문에 화면에 방출된 이벤트가 반영되지 않습니다.
이벤트를 받기 위해서는 아까 ViewController에서 만들어둔 input를 사용해야 합니다. 우리는 ViewModel에 있는 transform 메서드를 사용해서 Input를 Output으로 변경했습니다. 이 메서드를 사용해서 output를 받을 수 있겠네요.
let output = self.viewModel.transform(input: input)
Swift
복사
output를 받았기 때문에, output 안에 있는 스트림도 같이 받게 됩니다.
이전에 있던 Output 코드들을 조금 수정해봅시다. Input과는 다르게 viewModel로 적혀있던 부분을 output으로만 변경하면 됩니다. 이미 UI를 업데이트하는 코드는 다 완성되어 있으니깐요.
output.countRelay
.map { "\($0)" }
.bind(to: self.photoCountLabel.rx.text)
.disposed(by: self.disposeBag)
output.currentPageRelay
.observe(on: MainScheduler.instance)
.bind(to: self.pageControl.rx.currentPage)
.disposed(by: self.disposeBag)
let imageUrlRelay = output.imageUrlRelay
.observe(on: MainScheduler.instance)
.share()
imageUrlRelay
.bind(to: self.photoCollectionView.rx.items(cellIdentifier: PhotoCollectionViewCell.identifier,
cellType: PhotoCollectionViewCell.self)) { index, element, cell in
cell.configureCell(imageURL: element)
}
.disposed(by: self.disposeBag)
imageUrlRelay
.map { $0.count }
.bind(to: self.pageControl.rx.numberOfPages)
.disposed(by: self.disposeBag)
Swift
복사
ViewModel과 ViewController가 Input, Output를 사용해서 조금 더 정리된 방식으로 이벤트를 주고 받았습니다. Input, Output를 꼭 사용하지 않아도 괜찮습니다. Input, Output은 ViewModel과 바인딩하는 방식을 정리해주는 용도니깐요.
마무리
RxSwift를 사용해서 바인딩을 구현해보았습니다. RxSwift에서 제공해주는 부분들이 많아서 손쉽게 바인딩을 할 수 있었습니다.
위에 작성한 코드는 해당 레포에서 확인하실 수 있습니다. Input, Output를 사용하기 이전 코드는 mvvm/rxswift 브랜치에, Input, Output를 사용하는 코드는 main 브랜치에 존재합니다.
ImageExample_MVVM_RxSwift 파일을 봐주시면 됩니다.