[iOS] MVC, MVVM 패턴

MVC

Model, View, Controller 세 가지로 나뉘어 진다.

Model

데이터들을 정의한다.

// Model
struct Person {
	var name: String?
	var age: Int?
}

UI, 즉 View랑은 모르는사이이다.

Model에서 값이 변경되어도 View에게 알려주지도 않고 관심도 안준다.

View도 Model이 어떻게 되든 신경쓰지 않는다.

View

View는 Controller가 보여줘! 하면 보여주기만하는 말 그대로의 화면이고, 사용자랑 대화를 한다. 사용자의 이벤트를 받아오면 Controller에게 전해주고 Controller가 이벤트를 처리하고 다시 보여줘! 하면 보여준다.

Controller

Controller는 Model과 View사이에서 데이터를 어떻게 표시할 지 정한다.

// View + Controller

class ViewController: UIViewController {
	var person: Person!
	@IBOutlet weak var button: UIButton!
  @IBOutlet weak var label: UILabel!

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

	@IBAction func buttonClicked(_ sender: Any) {
		label.text = "Hello I'am \\(person.name), \\(person.age) years old"
		print("Button clicked")
  }
}

Model과 ViewController

Controller는 Model에 직접적으로 접근이 가능하지만 Model은 Controller에 직접적으로 변화를 알릴 수 없다.

Model과 View

위에서 설명했듯이 서로 관심없고 소통도 할 수 없다.

View와 Controller

Controller는 View에 직접적으로 접근이 가능하고, View 또한 Swift에서 정해진 방식(Action, target 등)으로 사용자의 이벤트를 전달할 수 있다.

MVVM

Model, View, ViewModel로 나누어진다.

Model

데이터 구조를 정의하고 ViewModel에게 결과를 알려준다.

// Model
struct Person {
	var name: String?
	var age: Int?
}

View

View는 사용자의 상호작용으로 이벤트가 일어나면 ViewModel에게 알린다.

ViewModel이 이벤트를 처리하고 View에게 전달해주면 다시 보여준다.

ViewModel

View에게서 이벤트를 받으면 그에맞는 처리를 한다.

Model의 수정을 담당한다.

사용

폴더 구조는 이렇게 잡았다.

Model

//
//  Person.swift
//  MVVMTest
//
//  Created by Harry on 2022/04/21.
//

import Foundation

struct Person {
    var name: String
    var birthday: Date
}

View

//
//  ContentView.swift
//  MVVMTest
//
//  Created by Harry on 2022/04/21.
//

import SwiftUI

struct ContentView: View {
    @StateObject var viewModel = ContentViewModel()
    
    var body: some View {
        VStack {
            Text(viewModel.name)
                .padding()
            Text(viewModel.age)
                .padding()
            Button("Change Name") {
                viewModel.changeName("Lily")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

ViewModel

//
//  ContentViewModel.swift
//  MVVMTest
//
//  Created by Harry on 2022/04/21.
//

import Foundation

class ContentViewModel: ObservableObject {
    @Published var person = Person(name: "Harry", birthday: Date())
    
    var name: String {
        person.name
    }
    
    var age: String {
        // Date to Age
        return "20"
    }
    
    func changeName(_ name: String) {
        person.name = name
    }
}

결과적으로 View에서는 ViewModel에 있는 함수만 호출한다. 직접 구현은 하지 않는다.

🤔

SwiftUI를 사용해보려고 MVC, MVVM패턴에 대해 간단히 알아보았다.

확실히 MVC패턴보다는 독립적으로 이루어져 있어 의존도가 낮고, 각각 테스트가 용이할 것 같다.

하지만 설계가 어렵고, ViewController가 거대해지는 것 처럼 ViewModel도 거대해 질 수 있다고 생각한다.

그래도 새로운 방식의 개발은 언제나 즐거우니 열심히 감을 잡으러 다녀야겠다.

 

 

참고사이트

https://seons-dev.tistory.com/84

SwiftUI : #2 MVVM의 간단한 예제

https://ios-development.tistory.com/75

[iOS - swift] MVC, MVP, MVVM 디자인 패턴

https://42kchoi.tistory.com/292

swift MVVM 정리 및 예제