일정
- 알고리즘 스터디 & 데일리 스크럼(09:00 ~ 11:00)
- UIKit 개인 과제 도전
- UIKit에서의 MVVM, RxSwift
https://github.com/iamchiwon/RxSwift_In_4_Hours
iOS UIKit에서 MVVM 패턴과 RxSwift 사용법
1. MVVM 패턴 개요
MVVM(Model-View-ViewModel) 패턴은 사용자 인터페이스의 구성 요소를 세 가지 주요 역할로 나누어 관리하는 패턴입니다:
- Model: 데이터와 비즈니스 로직을 관리합니다.
- View: 사용자 인터페이스(UI)를 담당하며, ViewModel의 데이터를 바인딩합니다.
- ViewModel: View와 Model 사이의 중재자 역할을 하며, UI에 필요한 데이터를 제공하고, View로부터의 입력을 처리합니다.
MVVM은 코드의 재사용성을 높이고, UI 로직과 비즈니스 로직을 분리하여 유지보수를 용이하게 만듭니다.
2. RxSwift란?
RxSwift는 반응형 프로그래밍을 위한 Swift 라이브러리로, 비동기 이벤트 흐름을 처리하는 데 유용합니다. RxSwift를 사용하면 데이터 흐름과 상태 변화를 선언적 방식으로 처리할 수 있습니다. RxSwift는 주로 옵저버블(Observable)과 옵저버(Observer) 패턴을 사용하여 데이터의 변화를 자동으로 UI에 반영하는데 사용됩니다.
3. MVVM + RxSwift로 구현하기
MVVM과 RxSwift를 결합하면 ViewModel에서 데이터를 관리하고, RxSwift의 Observable을 통해 View에서 데이터를 바인딩할 수 있습니다. 이를 통해 UI와 데이터의 변경 사항을 자동으로 연결할 수 있습니다.
3.1 Model: 데이터 구조 정의
struct User {
let name: String
let age: Int
}3.2 ViewModel: 데이터와 비즈니스 로직 관리
import RxSwift
import RxCocoa
class UserViewModel {
private let disposeBag = DisposeBag()
// 입력
var userName: BehaviorRelay<String> = BehaviorRelay(value: "")
var userAge: BehaviorRelay<Int> = BehaviorRelay(value: 0)
// 출력
var userDetails: Observable<String> {
return Observable.combineLatest(userName, userAge) { name, age in
return "Name: \(name), Age: \(age)"
}
}
func updateUserInfo(name: String, age: Int) {
userName.accept(name)
userAge.accept(age)
}
}3.3 View: UI 구성 및 데이터 바인딩
import UIKit
import RxSwift
import RxCocoa
class UserViewController: UIViewController {
private let disposeBag = DisposeBag()
private let viewModel = UserViewModel()
private let nameLabel = UILabel()
private let ageLabel = UILabel()
private let nameTextField = UITextField()
private let ageTextField = UITextField()
override func viewDidLoad() {
super.viewDidLoad()
setupUI()
bindViewModel()
}
private func setupUI() {
// UI 요소 설정
view.addSubview(nameLabel)
view.addSubview(ageLabel)
view.addSubview(nameTextField)
view.addSubview(ageTextField)
// 레이아웃 설정 (간단하게 스택뷰 등을 사용해도 좋음)
}
private func bindViewModel() {
// 텍스트 필드를 ViewModel의 입력에 바인딩
nameTextField.rx.text.orEmpty
.bind(to: viewModel.userName)
.disposed(by: disposeBag)
ageTextField.rx.text.orEmpty
.map { Int($0) ?? 0 }
.bind(to: viewModel.userAge)
.disposed(by: disposeBag)
// ViewModel의 출력(userDetails)을 라벨에 바인딩
viewModel.userDetails
.bind(to: nameLabel.rx.text)
.disposed(by: disposeBag)
// 예시로 userName을 업데이트하는 버튼 액션 (이벤트 발생)
let updateButton = UIButton(type: .system)
updateButton.rx.tap
.subscribe(onNext: { [weak self] in
self?.viewModel.updateUserInfo(name: "John Doe", age: 25)
})
.disposed(by: disposeBag)
}
}4. 동작 설명
- Model은 간단한 사용자 데이터를 나타내는 구조체입니다.
- ViewModel에서는
BehaviorRelay를 사용하여userName과userAge를 관리하고,userDetails는 이 데이터를 결합하여 최종적으로 UI에 표시할 문자열을 반환합니다. - View는 UIKit 컴포넌트(예:
UILabel,UITextField)를 사용하며,RxSwift를 통해ViewModel의 데이터를 바인딩합니다. 또한, 사용자 입력을 받아ViewModel에 전달합니다.
5. 결론
MVVM과 RxSwift를 결합하여 iOS 애플리케이션을 개발하면 코드의 가독성 및 재사용성을 크게 향상시킬 수 있습니다. ViewModel을 통해 UI와 비즈니스 로직을 분리하고, RxSwift를 활용하여 반응형 프로그래밍 패러다임을 채택하면 UI의 변경 사항을 더 쉽게 처리할 수 있습니다.
