[SwiftUI] MVVM 패턴을 샘플 코드로 간단히 이해하기

안녕하세요. 오늘은 MVVM 패턴에 대해서 알아 보겠습니다.

 

M-V-VM 은 Model, View, View Model의 약자입니다.

 

• Model : 사용자 정보, 상품 정보 등 여러 정보를 담고 있습니다. 단순 정보 뿐 아니라 많은 로직과 비즈니스 룰이 있어 사용자에게 숨길 필요가 있습니다.
• View : Model 정보를 View에서 보여줍니다.
• View Model : View에서 보여 주고 싶은 정보만 Model에서 가져옵니다. 그리고 View에서 업데이트된 정보가 있다면 View Model이 중간에서 매개체 역할을 해서 Model에 전달합니다.

 

MVVM 패턴을 적용한 아래 샘플앱은 Increment를 클릭하면 1씩 숫자가 높아집니다. 만약 3의 배수가 되면 화면에 Premium을 보여줍니다.

 

// Counter.swift

import Foundation

struct Counter {
    
    var value: Int = 0
    var isPremium: Bool = false
    
    mutating func increment() {
        value += 1
        
        // business logic
        if value.isMultiple(of: 3) {
            // premium
            isPremium = true
        } else {
            // not premium
            isPremium = false
        }
    }
}

 

// CounterViewModel.swift

import Foundation
import SwiftUI

class CounterViewModel: ObservableObject {
    
    @Published private var counter: Counter = Counter()
    
    var value: Int {
        counter.value
    }
    
    var premium: Bool {
        counter.isPremium
    }
    
    func increment() {
        counter.increment()
    }
}

 

// ContentView.swift

import SwiftUI

struct ContentView: View {
    @ObservedObject private var counterVM: CounterViewModel
    
    init() {
        counterVM = CounterViewModel()
    }
    
    var body: some View {
        VStack {
                    
            Text(counterVM.premium ? "PREMIUM" : "")
                .foregroundColor(Color.green)
                .frame(width: 200, height: 100)
                .font(.largeTitle)
            
            Text("\(counterVM.value)")
                .font(.title)
            Button("Increment") {
                self.counterVM.increment()
            }
        }
    }
}

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

 

* 위 샘플은 xcode 14.01에서 테스트한 코드입니다. (swift 5)

 

• Counter.swift = Model
• ContentView.swift = View
• CounterViewModel.swift = View Model

 

위 샘플에서 @ObservedObject이 제일 중요합니다.

@ObservedObject는, ObservableObject에서 Publish한 값을 받는 변수입니다. 따라서 우리는 CounterViewModel의 객체를 @OvservedObject로 선언함에 따라 View Model이 변화시킨 Model의 값을 받아와 렌더링해줄 수 있는 것입니다.

 

<< 참조 >>

Udemy "MVVM Design Pattern in iOS Using SwiftUI" 강의를 참고 하였습니다. 그래서 모든 내용의 저작권은 강의 원작자인 Mohammad Adam에게 있습니다.