[swift] Swift MVVM 아키텍처에서의 UI 컴포넌트 재사용 방법

04 Dec 2023

swift

MVVM(Modeled-View-ViewModel) 아키텍처는 SwiftUI 및 UIKit와 같은 iOS 개발 프레임워크에서 많이 사용되는 디자인 패턴입니다. 이 아키텍처는 UI 컴포넌트의 재사용을 촉진하고 유지 보수성을 향상시키는데 도움이 됩니다. 이번에는 Swift에서 MVVM 아키텍처를 사용할 때 UI 컴포넌트를 재사용하는 방법에 대해 알아보겠습니다.

1. Custom View 만들기

MVVM 아키텍처에서 UI 컴포넌트를 재사용하기 위해서는 먼저 Custom View를 만들어야 합니다. Custom View는 일반적인 View와 동일하게 사용되지만, ViewModel과 바인딩되어 데이터의 흐름을 관리합니다.

import SwiftUI

struct CustomView: View {
    @ObservedObject var viewModel: CustomViewModel
    
    var body: some View {
        VStack {
            Text(viewModel.title)
                .font(.title)
                .foregroundColor(.blue)
            
            Button(action: {
                viewModel.buttonTapped()
            }) {
                Text("Button")
            }
        }
    }
}

위의 예제에서 CustomView는 CustomViewModel과 바인딩되어 있습니다. View의 body 속성에서 ViewModel의 데이터를 사용하고, 버튼 액션과 같은 이벤트를 ViewModel에 전달하는 방식으로 동작합니다.

2. ViewModel 생성하기

Custom View를 재사용하기 위해서는 ViewModel을 만들어야 합니다. ViewModel은 View와 상호작용하고 데이터를 처리하는 역할을 합니다.

import Foundation

class CustomViewModel: ObservableObject {
    @Published var title: String = ""
    
    func buttonTapped() {
        // Button action 처리
    }
}

위의 예제에서 CustomViewModel은 title과 buttonTapped() 메서드를 가지고 있습니다. View에서 버튼을 탭했을 때 해당 메서드가 호출되어 처리됩니다.

3. Custom View 재사용하기

이제 CustomView와 CustomViewModel을 사용하여 UI 컴포넌트를 재사용할 수 있습니다. 예를 들어, 한 화면에서 CustomView를 여러 번 사용하려면 다음과 같이 코드를 작성할 수 있습니다.

import SwiftUI

struct ContentView: View {
    @ObservedObject var viewModel: ContentViewViewModel
    
    var body: some View {
        VStack {
            CustomView(viewModel: viewModel.customViewModel1)
                .padding()
            
            CustomView(viewModel: viewModel.customViewModel2)
                .padding()
        }
    }
}

위의 예제에서 ContentView는 CustomView를 두 번 사용하고 있습니다. 각각의 CustomView는 다른 CustomViewModel 인스턴스와 바인딩되어 있습니다.

결론

Swift MVVM 아키텍처에서 UI 컴포넌트를 재사용하는 방법에 대해 알아보았습니다. Custom View와 ViewModel을 만들고, 이들을 조합하여 화면에 다양한 UI를 구성할 수 있습니다. 이를 통해 코드의 재사용성과 유지 보수성을 향상시킬 수 있습니다.

1. Custom View 만들기

2. ViewModel 생성하기

3. Custom View 재사용하기

결론

참고 자료