[아키텍처패턴][iOS] MVVM패턴

이 포스팅은 Udemy "MVVM Design Pattern in iOS Using SwiftUI" 강의를 바탕으로 작성된 것이며

모든 내용의 저작권은 강의의 원작자인 Mohammad Adam 에게 있음을 밝힙니다.

 

 

✅ MVVM 패턴이란

Model - View - ViewModel로 나뉜다.

화면을 만드는 코드와 데이터를 처리하는 코드를 분리하는것이 MVVM의 핵심이다.

데이터 바인딩을 사용하여 View가 ViewModel 값을 관찰하여 변화를 반영한다.

 

예를 들어서,

버튼 클릭을 했을 때 다음 이미지가 나오는 동작을 한다고 친다.

MVC는 버튼이 눌리면 이미지를 "바꾼다"의 개념이라면,

MVVM은 버튼을 눌렀을 때 뷰모델의 데이터가 바뀌고, 데이터가 바뀌니 이미지도 "자연스럽게 바뀌어진다"는 개념이다.

 

그래서 View가 ViewModel의 값을 관찰한다는 말을 한 것이고,

이를 도와주는 프레임워크가 Combine, 라이브러리가 RxSwift이다.

 

✅ MVVM 장점

- 로직과 비지니스 로직을 분리할 수 있어 생산성이 높다.

- ViewModel에서 View를 몰라도 되니 UI가 나오지 않아도 개발이 가능하다.

- 의존성이 없기 때문에 테스트가 수월해지고 View와 ViewModel이 1:N 관계이므로 로직을 모듈화해서 여러 View에 재사용할 수 있다.

 

✅ MVVM 단점

- MVC에 비해 설계가 복잡하다.

- 데이터바인딩이라는 개념을 모르면 아예 시도조차 할 수 없다. ( 간단한 프로젝트는 MVC가 나을수도 )

- 데이터바인딩으로 인한 메모리 소모도 심하다.

- ViewModel에 모든 비즈니스 로직이 들어가기 때문에 ViewModel이 비대해진다.

 

✅ MVVM패턴 적용 예시

'Increment'를 클릭하면 숫자가 올라가고, 올라간 숫자가 3의 배수가 되면 화면에 'Premium'을 출력하는 앱을 MVVM패턴에 기반하여 작성해보자.

 

 

✅ Model 코드

Counter 이라는 Model이 구조체로 정의되어 있는 것을 볼 수 있고, 구조체 안에 숫자를 증가시켜주고 증가한 숫자에 따라 Premium을 결정하는 로직이 포함되어 있는 것을 확인할 수 있다.

 

✅ ViewModel 코드

'CounterViewModel'이라는 이름의 ViewModel은 ObservableObject로 선언되었고, 그 안에서 Counter Model을 가져와서 선언해주었으며 이는 @Published로 선언된 것을 볼 수 있다.

ObservableObject란 Model에 생긴 변화를 자동으로 View에 업데이트하라고 알려주는 프로토콜이라고 생각하면 되는데, 우리는 이것이 struct가 아닌 class에서 사용할 수 있다. 따라서 CounterViewModel을 class로 선언해준것을 볼 수 있고, 어떠한 event로 변수의 값이 바뀐다면 해당 변수를 @Published로 선언하여 자동으로 바뀐 값을 View에서 렌더링해줄 수 있다.

 

CounterModel 구조체를 @Published를 붙인 'counter'객체로 가져와서, 객체내에서 변수의 값을 함수를 통해 바꿔주고 View에 바뀐 것을 알려주고 있다.

그렇다면 View에서는 어떻게 알리는 것을 받으면 될까 ?

 

✅ View

가장 눈여겨 볼 것은 @ObservedObject이다.

 

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

 

'counterVM'라는 이름의 ViewModel객체를 통해 Model과 소통한다고보면 이해가 쉬울 것이다.

 

View안에서 'counterVM.increment()'함수를 통해 Model의 value값을 증가시키고,

counterVM.value 를 통해 그 값을 가져와 다시 화면을 렌더링하는 방식이다. 그리고 counterVM.premium을 통해 새로운 로직을 확인하고 로직에 따라 화면에 Premium이라는 text를 띄울지 결정하는 것을 볼 수 있다.

 

 

 

✅ 정리

MVVM 패턴에 대해 이해할 때 View Model의 역할을 제대로 이해하는 것이 가장 중요한 것 같다. 정보를 담고 있는 Model과 사용자에게 정보를 제공하는 View 사이에서 어떠한 역할을 담당하는지 생각해본다면, 조금 이해가 수월할 것이다.