MVVM 패턴 이해하기

MVVM 디자인 패턴

MVVM 패턴은 기존 MVC 패턴의 문제점을 해결하고자 새로 등장한 디자인패턴이다.
MVC 패턴의 경우 View와 Model 사이의 연관성이 매우 강하고 큰 프로젝트일수록 VC가 커지는 단점이 있다.

MVVM

View와 View Model, Model로 구성되어있는 새로운 디자인 패턴으로 View와 Model 중간에 View Model이 존재하여 UI와 Logic가 완벽히 분리될 수 있도록 돕는다.

프로세스

1. View(주로 ViewController)로부터 사용자 action(text,button 입력 등)이 들어오면
2. View Model에서 현재 Model에 맞는 형태로 데이터를 가공한다.
3. 이후 View Model이 Model에게 데이터 업데이트를 요청하고 Model은 데이터를 생성하거나 변경한다.
4. Model에서 데이터 업데이트가 끝나면 다시 View Model에 알리고
5. View Model은 변경된 데이터를 바탕으로 자동으로 View를 갱신한다.(Data Binding)

---

예시 프로젝트

!!MVVM 패턴을 이해하는 데에 적절한 예시가 아닐 수 있습니다. 피드백은 환영합니다!!

View(ViewController)

View와 연결된 View Controller
사용자가 text 입력 후 버튼을 누르면 입력을 바탕으로 DogViewModel 객체를 생성한다.

@IBAction func ResultPressed(_ sender: UIButton) {
        print("I'm View Controller - ResultPressed")
        let name = nameTextField.text ?? ""
        let age = ageTextField.text ?? "0"
        
        viewmodel = DogViewModel(name: name, breed: selectedBreed, age: Int(age)!)
        
        viewmodel.configure(self)
    }

ViewModel

Model의 구조로 데이터를 가공하는 ViewModel
ViewModel 객체를 생성해 데이터 가공 후 Model에 데이터를 전달하여 업데이트를 요청한다.

class DogViewModel {
    let dog: Dog
    
    init(name: String, breed: String, age: Int) {
        print("I'm DogViewModel - init")
        self.dog = Dog(name: name, breed: breed, age: age)
        (...)
    }
}

Model에서 데이터 업데이트가 끝나면 함수를 활용해 View의 값을 갱신해준다.

extension DogViewModel {
    func configure(_ vc: ViewController) {
        print("I'm DogViewModel - configure")
        vc.nameLabel.text = name
        vc.ageLabel.text = ageText
        vc.feeLabel.text = adoptionFeeText
    }
}

Model

실제 데이터가 담겨있는 Model
전달받은 값을 활용해 데이터를 생성하거나 변경한다.

class Dog {
    enum Breed {
        case mal
        case pom
        case pug
        case poo
    }
    
    let name: String
    let breed: Breed
    let age: Int
    
    init(name: String, breed: String, age: Int) {
      (...)
    }
}
    

이해를 돕기위한 출력예시

View(View Controller) -> View Model -> Model -> View Model(&View)

View와 Model 사이의 데이터 전달을 View Model이 중개하여 독립적인 개발 및 테스트 가능