iOS 아키텍처 패턴 이해하기(MVC, MVVM)

https://medium.com/ios-os-x-development/ios-architecture-patterns-ecba4c38de52

iOS Architecture Patterns

MVC 패턴 이란?

https://developer.apple.com/library/archive/documentation/General/Conceptual/DevPedia-CocoaCore/MVC.html

예시 코드 

import UIKit

struct Person { // Model
    let firstName: String
    let lastName: String
}

class GreetingViewController : UIViewController { // View + Controller
    var person: Person!
    let showGreetingButton = UIButton()
    let greetingLabel = UILabel()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.showGreetingButton.addTarget(self, action: "didTapButton:", forControlEvents: .TouchUpInside)
    }
    
    func didTapButton(button: UIButton) {
        let greeting = "Hello" + " " + self.person.firstName + " " + self.person.lastName
        self.greetingLabel.text = greeting
        
    }
    // layout code goes here
}
// Assembling of MVC
let model = Person(firstName: "David", lastName: "Blaine")
let view = GreetingViewController()
view.person = model

해석

MVC 패턴은 iOS 애플리케이션 개발에서 자주 사용되는 디자인 패턴입니다. 이 패턴은 애플리케이션을 Model, View, Controller 세 가지 부분으로 나누어 구성합니다.

Model

먼저, Person 구조체는 Model 역할을 담당합니다. 이 구조체는 firstName과 lastName이라는 속성을 가지고 있어서 개인의 이름 정보를 저장합니다.

View와 Controller 

GreetingViewController 클래스는 View와 Controller 역할을 동시에 수행합니다.

View는 사용자에게 보여지는 화면을 구성하는 역할이며, Controller는 View와 Model 사이의 상호작용을 조정합니다.

GreetingViewController 클래스는 UIViewController를 상속받았기 때문에 View 컨트롤러로서의 역할을 수행할 수 있습니다.

GreetingViewController 클래스에는 person이라는 Person 객체를 저장할 변수와 showGreetingButton, greetingLabel이라는 뷰 요소들이 선언되어 있습니다.

showGreetingButton은 버튼 역할을 하며, greetingLabel은 인사말을 표시하는 레이블입니다.

viewDidLoad() 메서드는 View가 로드되었을 때 호출되는 메서드로, 초기화 작업을 수행합니다. 여기서는 showGreetingButton이 탭되었을 때 호출될 didTapButton(_:) 메서드를 설정하고 있습니다.

didTapButton(_:) 메서드는 showGreetingButton이 탭되었을 때 호출되는 메서드로, 해당 버튼이 눌렸을 때 실행되는 동작을 정의합니다. 이 메서드에서는 person 객체의 firstName과 lastName을 사용하여 인사말을 생성하고, 그 결과를 greetingLabel의 텍스트로 설정합니다.

MVC 패턴을 적용하기 위해 위 코드에서는 Model인 Person 객체를 생성하고, View인 GreetingViewController 객체를 생성한 후 person 변수에 Model 객체를 할당하였습니다. 이렇게 함으로써 View와 Model이 연결되었습니다.

이렇게 구성된 코드는 Model과 View, Controller의 역할을 분리하여 유지보수와 코드의 재사용성을 향상시킬 수 있습니다.

 

MVVM 패턴 이란?

MVVM

The latest and the greatest of the MV(X) kind

The MVVM is the newest of MV(X) kind thus, let’s hope it emerged taking into account problems MV(X) was facing previously.

In theory the Model-View-ViewModel looks very good. The View and the Model are already familiar to us, but also the Mediator, represented as the View Model.

MVVM

 

예시코드

import UIKit

struct Person { // Model
    let firstName: String
    let lastName: String
}

class GreetingViewModel { // ViewModel
    private let person: Person
    
    init(person: Person) {
        self.person = person
    }
    
    var greetingText: String {
        return "Hello " + person.firstName + " " + person.lastName
    }
}

class GreetingViewController: UIViewController { // View + Controller
    var viewModel: GreetingViewModel!
    let showGreetingButton = UIButton()
    let greetingLabel = UILabel()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.showGreetingButton.addTarget(self, action: #selector(didTapButton(_:)), for: .touchUpInside)
    }
    
    @objc func didTapButton(_ button: UIButton) {
        let greeting = viewModel.greetingText
        self.greetingLabel.text = greeting
    }
    // layout code goes here
}

// Assembling of MVVM
let model = Person(firstName: "David", lastName: "Blaine")
let viewModel = GreetingViewModel(person: model)
let view = GreetingViewController()
view.viewModel = viewModel

해석

GreetingViewModel 클래스가 추가되었습니다. 이는 ViewModel 역할을 수행합니다.

ViewModel은 View와 Model 사이의 인터페이스 역할을 하며, View에서 필요한 데이터와 비즈니스 로직을 제공합니다. GreetingViewModel은 person 객체를 속성으로 가지고 있으며, greetingText라는 계산된 속성으로 인사말을 반환합니다.

 

class GreetingViewController: UIViewController { // View + Controller
    var viewModel: GreetingViewModel!

GreetingViewController 클래스에서 viewModel이라는 GreetingViewModel 객체를 저장할 변수가 추가되었습니다.

이를 통해 View와 ViewModel이 연결됩니다.

 

@objc func didTapButton(_ button: UIButton) {
        let greeting = viewModel.greetingText
        self.greetingLabel.text = greeting

didTapButton(_:) 메서드 내에서 viewModel.greetingText를 사용하여 인사말을 생성합니다. 이렇게 함으로써 View는 ViewModel에 의존하여 필요한 데이터를 가져옵니다.

MVVM 패턴은 View와 비즈니스 로직을 분리하여 테스트 용이성과 재사용성을 높이는 장점을 가지고 있습니다.

View는 사용자 인터페이스에 집중하고, ViewModel은 View와 Model 사이의 데이터 흐름을 관리하여 더욱 유연하고 확장 가능한 애플리케이션을 구축할 수 있습니다.