MVVM 디자인 패턴

MVVM(Model-View-ViewModel) 은 주로 UI 기반 앱에서 사용되는 디자인 패턴 입니다.

 

MVVM 디자인 패턴은 주로 세가지의 구성요소로 나뉩니다.

Model

Model은 앱에서 사용되는 데이터구조를 정의하는 부분 입니다.

 

앱의 데이터와 비즈니스 로직을 담당하며, 데이터를 가저오고 저장하는 역할을 합니다.

 

View

View는 앱의 UI로  사용자 인터페이스를 담당합니다.

 

전형적으로 UIView의 서브 클래스들을 의미합니다.

 

ViewModel

ViewModel은 Model이 가지고 있는 정보를 View에 보여지는 값들로 변경하는 것을 의미합니다.

 

View에서 발생하는 이벤트를 감지하고, 해당 이벤트에 맞는 비즈니스 로직을 수행하는 역할 입니다.

 

 

 

MVVM은 앱을 위의 세 가지 구성요소로 나누어,

 

코드를 보다 체계적이고 복잡한 앱 개발을 단순화 시킵니다.

 

 

iOS개발에 MVVM을 사용하는 이유

1.관심사 분리: MVVM을 사용하면 뷰를 데이터 모델에서 분리할 수 있습니다.

즉, 단방향 데이터 바인딩을 사용하여 두 가지를 동기화 상태로 유지할 수 있습니다.

2.코드 재사용성 향상:MVVM은 앱을 유지 관리하기 쉬운 작은 청크로 나눌 수 있기 떄문에 재사용 가능한 코드를 작성하는데 도움이 됩니다.MVVM은 재사용 가능한 코드를 쉽게 작성할수 있게 해줍니다. 뷰 모델과 프레젠터를 작성하여 많은 수정 없이 여러 앱에서 사용 가능합니다. 

 

3.독립적인 워크플로(작업절차의 운영적 측면):UI 디자인과 로직 개발을 명확히 구분함으로써 디자이너와 개발자는 독립적으로 작업할 수 있으며, 효율성이 향상되고 개발 프로세스가 빨라집니다.

 

4.빠른 UI 적응성:만약 운동 앱의 UI를 새로운 모습으로 재설계 해야하는 경우에는 운동 데이터를 추적하는 Model이나 이를 처리하는 ViewModel에 영향을 주지 않고 View를 변경할 수 있어 원활한 전환을 할 수 있습니다.

 

5.Swift와 SwiftUI와의 시너지:MVVM은 Swift와 SwiftUI 와 잘 어울리며, 특히 데이터 바인딩과 선언적 접근 방식에서 우수성을 보입니다. 그렇기 때문에 최신 iOS 환경에서 앱 개발 능력을 향상 시킬 수 있습니다.

 

iOS 적용 예제

제가 만들고 있는 프로젝트 소스코드 일부를 가져와 예제를 보여드리겠습니다

 

1.Model

 

해당 구조체들이  메모소스코드의 모든 속성을 정의합니다.

struct Memo {
    var title: String
    var content: String
    var date: Date
    var fontSize: CGFloat = 20
    var fontWeight: Font.Weight = .regular
    var textColor: Color = .black
}

 

2.ViewModel

 

 

import SwiftUI
import Combine

class MemoViewModel: ObservableObject {
    @Published var memo: Memo
    
    init(memo: Memo) {
        self.memo = memo
    }
}

 

3.view

사용자와 상호작용 하게되는 부분 입니다.

 

struct MemoView: View {
    @EnvironmentObject private var pathModel: PathModel
    @EnvironmentObject private var memoListViewModel: MemoListViewModel
    @StateObject var memoViewModel: MemoViewModel
    @State var isCreateMode: Bool = true

    var body: some View {
        ZStack {
            VStack {
                CustomNavigationBar(
                    leftBtnAction: {
                        pathModel.paths.removeLast()
                    },
                    rightBtnAction: {
                        if isCreateMode {
                            memoListViewModel.addMemo(memoViewModel.memo)
                        } else {
                            memoListViewModel.updateMemo(memoViewModel.memo)
                        }
                        pathModel.paths.removeLast()
                    },
                    rightBtnType: isCreateMode ? .create : .complete
                )

                MemoTitleInputView(memoViewModel: memoViewModel, isCreateMode: $isCreateMode)
                    .padding(.top, 20)

                MemoContentInputView(memoViewModel: memoViewModel)
                    .padding(.top, 10)
            }

            if !isCreateMode {
                RemoveMemoBtnView(memoViewModel: memoViewModel)
                    .padding(.trailing, 20)
                    .padding(.bottom, 10)
            }
        }
    }
}