MVVM 패턴 기초

MVVM (Model-View-ViewModel) 패턴

Model

• Model은 데이터와 관련된 코드를 가지는 계층으로, 구조체 클래스 객체를 사용하여 데이터를 정의, 네트워크 로직도 포함된다.

View

• View는 실질적으로 UI를 담당하는 계층으로, View의 각 컴포넌트에 대한 정보를 담고 어느 위치에 어떻게 배치될지를 가진다. ViewController가 여기에 해당되며, ViewModel에게 데이터 혹은 로직을 요청하고, ViewModel로부터 받은 데이터를 UI로 표현한다. 중요한 점은 View가 Model을 직접 소유하지 않으며, ViewModel를 통해 가공된 데이터를 받아와야 한다.

ViewModel

• ViewModel은 앱의 핵심적인 비즈니스 로직을 담당하는 계층으로, MVC에서 Controller의 역할을 수행한다. View로부터 받은 요청을 받아 로직을 수행하고 Model의 변화에 따라 데이터를 처리하여 View를 업데이트한다. ViewModel을 분리함으로서 유지보수성과 테스트에 용이하다.

Data Binding

• MVVM 패턴에서 View와 ViewModel 사이에서 데이터의 변경을 동기화 하는 방법인 데이터 바인딩은, MVVM 뿐만 아니라 VIPER, Clean Architecture 등 다양한 패턴에서 사용되곤 한다. 데이터 바인딩의 예로는 Closure, Reactive Framework, Perperty Observer(willSet, didSet) 등이 있다.

그 중 Perperty Observer를 사용한 간단한 예제로

Model

struct Person {
    let name: String
    let age: Int
}

ViewModel

import Foundation

final class PersonViewModel {
    private var person: Person

    init(person: Person) {
        self.person = person
    }

    var name: String {
        return person.name
    }

    var age: String {
        return "\(person.age)"
    }
}

ViewController

import UIKit

final class PersonViewController: UIViewController {
    @IBOutlet private weak var nameLabel: UILabel!
    @IBOutlet private weak var ageLabel: UILabel!
    
    var viewModel: PersonViewModel! {
        didSet {
            updateUI()
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        updateUI()
    }

    private func updateUI() {
        nameLabel.text = viewModel.name
        ageLabel.text = viewModel.age
    }
}