MVVM 디자인 패턴 공부하기

MVVM 패턴을 공부해봅시다.!

MVVM 패턴이 나오기 전에는 MVC 패턴을 많이 사용했습니다.

MVC : Model (데이터), View (UI 요소), Controller (중개자)
MVVM : Model, View, View Model

하지만 MVC 패턴에서 Controller가 할 일이 방대해짐에따라 코드가 많아지는 현상이 발생하게 됩니다. (여기서 뷰컨은 Massive View Controller라는 별명을 가지게 됩니다.)

이렇게 되면 유지보수하기도 힘들고 수정도 용이하지 않습니다.

이런 이유때문에 나온 게 MVVM 패턴입니다.

MVVM 패턴은 Model(데이터), View (UI 요소, UIView, UIViewController), View Model (중개자)로 이루어져 있습니다.

MVVM 패턴은 뷰컨이 하는 일을 축소시키고 얘가 원래 하던 일을 뷰 모델에게 위임하게 됩니다. 이렇게 되면 클래스가 할 일이 명확해져서 수정에도 용이하고 유지보수를 하는 데 비용이 적게 들게 됩니다.

MVC패턴에서는 View와 Model 사이에 중개자 역할을 View Controller가 했었는데 MVVM 패턴에서는 그걸 View Model이 하게 돼서 모델은 뷰 레이어와 소통하지 않고 뷰 모델하고만 소통을 합니다.

예시를 보겠습니다.

 

위의 테이블 뷰를 구성할 때 MVVM 패턴을 사용해보겠습니다.

import UIKit

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

-> Model

데이터를 의미합니다. 테이블 뷰 셀에 표시할 데이터를 struct로 생성합니다.

import UIKit

class ViewModel {
    let persons: [PersonModel] = [
        PersonModel(name: "hee", age: 26),
        PersonModel(name: "hong", age: 27),
        PersonModel(name: "do", age: 28),
        PersonModel(name: "jun", age: 30)
    ]
    
    var sortedPersons: [PersonModel] {
        let sortedPersons =  persons.sorted {
            return $0.age < $1.age
        }
        return sortedPersons
    }
    
    var numberOfPersons: Int{
        return persons.count
    }
    
    func getPerson(index: Int) -> PersonModel{
        return sortedPersons[index]
    }
}

-> View Model

기존에 View Controller에 추가했던 데이터 관련한 변수와 함수들을 모두 뷰 모델에 추가합니다.

뷰 컨은 이 뷰 모델을 가지고 데이터의 수를 알 수 있고, getPerson 메서드를 통해서 원하는 데이터를 얻을 수도 있습니다.

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
	// 1
    let viewModel = ViewModel()
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    	// 2
        return viewModel.numberOfPersons
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "personCell", for: indexPath) as? personCell else {
            return UITableViewCell()
        }
        // 3
        let person = viewModel.getPerson(index: indexPath.row)
        cell.updateData(person: person)
        return cell
    }
}

-> Controller

1. 우선 뷰 모델 레퍼런스 변수를 생성합니다.

2. 기존에는 테이블에 표시할 데이터의 수를 리턴할 때 뷰컨이 데이터에 직접 접근해서 데이터의 수를 알 수 있었는데 

MVVM 패턴에서는 뷰 모델을 이용해서 데이터의 수를 알 수 있게 되었습니다.

3. 또한 셀에 표시할 person도 뷰 모델의 getPerson 메서드에 접근해서 셀에 표시할 데이터를 얻을 수 있습니다.