[Swift] - MVVM 패턴

MVC 패턴에 대해 알아본 후, View와 Controller의 의존성이 높은 문제를 알게되었고 이를 해결하기 위한 MVVM패턴에 대해 정리해보고자 한다.

 

[swift] MVC 패턴

 

 

✏️ MVVM 패턴이란?

https://medium.com/@geun2121/swift-mvvm-%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8C%A8%ED%84%B4-c9a9f9e48631

 

: MVVM패턴은 View + ViewModel + Model 구조의 아키텍처 패턴을 말한다.

 

쉽게말하면,

MVC에서 ViewController는 View로 보고, Controller 로직은 ViewModel로 옮겼다고 할 수 있다.

 

1️⃣ View

 

: 사용자에게 보여지는 앱의 UI에 대한 코드를 가지며, MVC와 같이 재사용성이 강조된다.

 

• 사용자에게 보여주는 UI를 담당
• ViewModel로 부터 data를 가져와 어떻게 배치할 지 정의
• ViewModel의 어떤 Method를 이용할 지 정의

 

2️⃣ ViewModel

 

: 앱의 핵심 로직을 가지며, MVC 패턴의 Controller와 비슷한 역할을 한다.

 

• View와 Model사이에서 View의 요청에 따라 로직을 실행
• Model의 변화에 따라 data를 처리하여 View를 변경
• UI관련 코드로부터 완전히 분리되어있고, ViewModel에는 SwiftUI와 같은 프레임워크를 import하지 않아도 된다.

 

 

3️⃣ Model

 

: data와 관련된 코드를 가지며, View와 ViewModel을 신경쓰지 않고 data를 어떻게 저장할지만 생각하면 된다.

 

• 데이터와 관련된 내용
• 데이터와 관련된 로직

 

---

 

✏️ MVVM 패턴 동작 과정

 

 

=> 동작흐름은 "단방향"

 

1. 사용자의 action은 View를 통해 입력
2. Command Pattern으로 View Model에 action 전달
3. ViewModel에서 Model에게 데이터 요청
4. Model은 ViewModel에게 요청받은 데이터로 응답
5. 응답받은 데이터를 ViewModel에서 가공 및 저장
6. DataBinding을 통해 ViewModel 값이 변하면, View도 자동으로 업데이트

 

1. View에 들어온 Event를 View Model에게 알려주면 View Model은 Model을 업데이트 한다.
2. Model이 변화하면 이는 View Model에 알려지고, View Model과 바인딩되어있는 View가 업데이트 된다.

 

 

---

✏️ Command 패턴?

 

View -> ViewModel의 흐름에서 전달 패턴으로 command 패턴을 사용한다. 

 

Command 패턴은 특정 동작을 객체로 캡슐화하여 매개 변수화하고, 다른 객체에 요청을 보내거나 큐에 저장하며, 작업을 지연하거나 취소할 수 있게 하는 패턴이라고 한다.

 

예를들어, 버튼 클릭과 같은 사용자 입력은 command로 캡슐화되고, ViewModel 내에서 처리된다.

 

 

---

✏️ 데이터 바인딩?

 

데이터 바인딩은 UI 구성 요소와 데이터 모델 사이의 동적인 연결을 의미한다.

MVVM에서는 ViewModel의 상태와 View 간에 양방향 또는 단방향 데이터 바인딩을 통해 데이터를 효과적으로 동기화할 수 있다.

swift에서 대표적으로 Combine 또는 RxSwift와 같은 라이브러리를 사용하여 쉽게 구현할 수 있다고 한다.

 

이를 통해 ViewModel의 변경 사항이 자동으로 View에 반영되고, View에서의 상호 작용 역시 ViewModel에 전달된다.

 

=> 요소 간에 바인딩이 잘 된 구조는 각 요소 사이의 의존성이 최소화되거나 제거되는 효과를 볼 수 있다.

 

 

---

 

 

✏️ MVVM 패턴 예시

 

아래의 예제는 Combine을 사용하여 데이터 바인딩을 구현한 예제이다.

 

ViewModel은 Model을 감싸고, View는 ViewModel과 상호작용한다.  

버튼을 클릭하면 ViewModel은 data를 업데이트하고, View는 자동으로 업데이트된다.

 

import Combine

class Model {
    @Published var data: String = "Hello, MVVM!"
}

class ViewModel {
    private var model: Model = Model()
    var dataPublisher: Published<String>.Publisher { model.$data }

    func fetchData() {
        // 비즈니스 로직 수행
        model.data = "New Data Fetched!"
    }
}

struct ContentView: View {
    @StateObject private var viewModel = ViewModel()

    var body: some View {
        VStack {
            Text(viewModel.dataPublisher)
                .padding()

            Button("Fetch Data") {
                viewModel.fetchData()
            }
            .padding()
        }
    }
}

 

 

---

 

✏️ MVVM 패턴 장점과 단점

 

🟢 장점

 

• Model, View, ViewModel로 역할 분리함으로써 코드의 가독성과 유지보수성 향상
• 각각의 구성요소가 독립적으로 테스트 가능하여 단위 테스트에 용이
• 데이터 바인딩을 통해 View와 ViewModel 간의 동적인 연결이 가능하여, UI 업데이트가 자동으로 이루어져 코드의 일관성을 유지하고 효율적인 개발 가능
• ViewModel은 핵심 로직을 담담하여, 동일한 로직을 여러 View에서 사용할 수 있다.
• 규모가 큰 프로젝트에 적합하다고 볼 수 있다.

 

🔴 단점

 

• 규격화된 것이 없어 처음에 배우기 어려우며, Combine과 RxSwift와 같은 라이브러리를 사용하는 경우 더욱 접하기 어렵다.
• 일부 프로젝트에서는 MVVM이 과도하게 일반화되어 코드가 복잡해질 수 있다. 규모가 작은 프로젝트는 다른 아키텍처 패턴이 더 적합할 수 있다.
• View와 ViewModel 사이의 의존성이 높아질 경우, 재사용성과 테스트 용이성을 감소시킬 수 있다.

 

✏️ MVC vs MVVM

 

MVC에서 View와 Controller 간의 의존성이 높아지는 이유 중 일부는 다음과 같다.

 

• MVC에서는 View와 관련된 로직이 주로 Controller에 위치하게 되는데, 이로 인해 Controller가 View에 강하게 종속되어 View의 변경이나 업데이트 시 Controller도 함께 수정해야 하는 경우가 발생한다.
• View와 Controller가 강하게 결합되면, 유연성이 떨어져서 한 부분의 변경이 다른 부분에도 영향을 미칠 수 있습니다.

 

MVVM은 이러한 문제를 해결하기 위해 ViewModel을 도입하여 View 로직과 데이터 처리를 분리하고, 단방향 데이터 바인딩을 통해 View와 ViewModel 간의 느슨한 결합을 이루도록 한다.

      1. View의 변경이 ViewModel을 통해 이루어지므로, Controller에 대한 의존성이 낮아지고 유지보수성이 향상된다.
      2. ViewModel은 테스트하기 용이하므로 테스트 주도 개발(Test-Driven Development, TDD)에도 잘 부합한다.

 

---

 

참고

 

• https://medium.com/@geun2121/swift-mvvm-%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8C%A8%ED%84%B4-c9a9f9e48631