[swift] Swift MVVM 아키텍처에서의 사용자 인터페이스 디자인 패턴

04 Dec 2023

swift

Swift MVVM 아키텍처는 많은 iOS 앱 개발자들이 선택하는 패턴 중 하나입니다. MVVM은 Model-View-ViewModel의 약자로 앱의 비즈니스 로직을 뷰와 분리하여 앱을 보다 효율적으로 개발하고 유지보수하기 위한 목적으로 사용됩니다. MVVM 아키텍처에서 중요한 요소 중 하나는 사용자 인터페이스 디자인 패턴입니다.

1. Binding

MVVM 아키텍처에서 사용자 인터페이스 디자인 패턴을 구현하는 가장 일반적인 방법은 바인딩입니다. 바인딩은 뷰와 뷰모델 사이의 데이터 동기화를 위한 메카니즘으로 사용됩니다. 뷰모델은 데이터를 감시하고, 데이터가 변경되면 뷰에 알리고 업데이트할 수 있습니다. Swift에서는 바인딩을 구현하기 위해 Key-Value Observing(KVO)이 사용됩니다. KVO는 프로퍼티의 값을 변경하는 것을 감지하고, 해당 변경 사항에 대한 알림을 받을 수 있도록 해줍니다.

2. 데이터 바인딩 적용하기

뷰와 뷰모델 간의 데이터 바인딩을 구현하기 위해 Swift에서 제공하는 @ObservedObject 속성을 사용할 수 있습니다. @ObservedObject란 ObservableObject 프로토콜을 준수하는 객체를 의미하며, 뷰모델은 이 프로토콜을 채택하여 속성에 @ObservedObject를 사용하여 해당 객체를 관찰할 수 있습니다. 그리고 뷰에서 @ObservedObject 속성을 사용하여 해당 뷰모델을 감시하고, 뷰모델의 변경 사항을 자동으로 업데이트할 수 있습니다.

import SwiftUI

struct ContentView: View {
    @ObservedObject var viewModel: ViewModel
    
    var body: some View {
        VStack {
            Text(viewModel.text)
            Button(action: {
                viewModel.updateText()
            }) {
                Text("Update")
            }
        }
    }
}

class ViewModel: ObservableObject {
    @Published var text: String = "Hello, MVVM"
    
    func updateText() {
        text = "Hello, Swift"
    }
}

3. 명령(Command) 패턴

MVVM 아키텍처에서 명령 패턴은 사용자의 동작을 처리하고, 뷰모델에서 비즈니스 로직을 실행하는 방식입니다. 명령 패턴은 주로 사용자의 입력에 응답하여 액션을 수행합니다. Swift에서는 Closure를 사용하여 명령 패턴을 구현할 수 있습니다. 이때, 클로저 내부에서 비즈니스 로직을 수행하고 뷰모델을 호출하게 됩니다.

import SwiftUI

struct ContentView: View {
    @ObservedObject var viewModel: ViewModel
    
    var body: some View {
        VStack {
            Text(viewModel.text)
            Button(action: {
                viewModel.updateText()
            }) {
                Text("Update")
            }
        }
    }
}

class ViewModel: ObservableObject {
    @Published var text: String = "Hello, MVVM"
    
    func updateText() {
        DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
            self.text = "Data updated"
        }
    }
}

4. 결론

MVVM 아키텍처에서 사용자 인터페이스 디자인 패턴은 바인딩과 명령 패턴을 활용하여 구현할 수 있습니다. 바인딩을 사용하면 뷰와 뷰모델 간의 데이터 동기화를 자동으로 처리할 수 있고, 명령 패턴을 사용하여 사용자의 동작을 처리할 수 있습니다. 이러한 패턴들은 앱의 유지보수성을 향상시키고, 코드의 재사용성을 높여줍니다.

1. Binding

2. 데이터 바인딩 적용하기

3. 명령(Command) 패턴

4. 결론

References