[Swift/iOS] MVVM 패턴을 공부하며 간단한 어플리케이션 만들기

디자인 패턴을 공부하면서, MVC패턴을 정리하였다.

공부하면서 MVC의 문제점을 보완하기 위해 파생된 MVVM패턴에 대해서도 알아보고 싶어 MVVM 패턴을 공부하며 정리해보려고 한다.

 

 

Table Of Contents

- 등장 배경

- MVVM 패턴

- MVVM 패턴 예시(계산기 어플리케이션)

- MVVM 패턴 장점

- MVVM 패턴 단점

 

등장 배경

MVC는 View와 Controller 사이의 의존성이 높은데

View와 Controller가 밀접하게 연결되어 있으면 재사용성이 떨어지고 유닛 테스트를 진행하기 어렵다.

이런 문제를 해결하기 위해 MVVM 패턴이 등장하였다.

또한 MVVM은 MVC에서 Controller가 유저 입력 프로세싱, 데이터 변환, 화면 전환, 생명 주기, 네트워크 통신 등등 많은 역할을 수행하던 부담을 덜어줄 수 있다.

 

MVVM 패턴

MVVM은 Model, View, ViewModel의 약자이며, 어플리케이션을 세 가지 역할로 구분한 개발 방법론이다.

MVC와 비교해보면 Controller가 빠지고 ViewModel이 추가되었으며 세가지 부분은 다음과 같은 역할을 한다.

 

 

1. Model(모델) : 어플리케이션에서 사용되는 데이터의 구조를 관리한다.

2. View(뷰) : ViewController를 View로 보며, UI와 생명주기 코드를 다룬다.

3. ViewModel(뷰 모델) : View를 위한 Model로, Model에서 얻어온 데이터를 View에 맞게 가공/처리한다.

 

 

사진과 함께 MVVM의 특징을 살펴보자

• 이벤트의 흐름이 단방향이다. 뷰가 사용자의 이벤트를 뷰 모델로 전달하고 뷰모델에서는 모델을 수정하거나 하는 요청을 모델에 전달한다.
• Command 패턴과 Data Binding을 이용하여 View와 View Model 사이의 의존성을 제거하였다.
• 뷰에서 뷰모델에 명령할 때 Commad 패턴으로 전달하기 때문에 뷰 모델 내부에서 무엇이 일어나는 지 뷰가 상관하지 않는다. 
• 모델에서 요청에 의해 변경된 사항을 뷰모델로 전달 해주면 데이터가 바뀌면 Binding 되어있던 요소들이 업데이트 된다.

*Binding 

뷰모델의 어떤 것을 뷰가 관찰(Observing)하다가 값이 바뀌면 사용자에게 보여주고 있는 데이터를 변경하여 보여줌

View Model은 Observable이며 View는 View Model을 구독,관찰(Subscribe)한다.

 

*Command 패턴

결과를 위한 계산과정의 각 부분들을 캡슐화 시킬 수 있다. 계산의 결과를 원하는 클라이언트는 사실 과정은 궁금하지 않고 결과만 올바르게 출력되면 된다.

 

 

MVVM 패턴 예시

 

MVVM패턴을 사용해 만든 계산기를 통해 더 자세히 살펴보자

 

-View

MVVM에서는 ViewController를 View로 보며, UI와 생명주기 코드를 다룬다.

뷰에서, 숫자와 연산자 버튼을 눌렀을 때의 명령을 Command 패턴으로 뷰모델에 전달해주는 것을 볼 수 있다.
뷰모델에서 각각 numberBtnOn, operationBtnOn이 수행되도록 한다.

 

 

26번째 라인의

func bindViewModel () {
        viewModel.displayText
            .bind(to: self.displayLabel.rx.text)
            .disposed(by: disposeBag)
    }

bindViewModel 함수를 통해 displayLable.text와 뷰모델의 displayText를 바인딩해주었다.

뷰모델의 displayText값이 변경될 때 마다 self.resultLabel.rx.text도 같은 값으로 변경된다.

.disposed는 바인드후 방출하는 Disposable를 disposeBag 에 담아주는 역할을 한다.

이는 메모리 자동 해지를 위해 (자동구독해지) 필요하다.

 

 

-Model

Model에서는 계산기에서 사용되는 데이터와 비즈니스 로직을 관리한다.

코드를 보면 계산기의 비즈니스 로직에 해당되는 연산 부분을 구현한 함수들과, 연산을 위해 필요한 데이터들로 구성되어 있다.

MVC계산기의 Model과 동일했다.

 

 

- ViewModel

ViewModel에서는 관찰하고 있다가 숫자나 연산자 버튼이 눌림을 감지하면 

각각 inputDigit, inputOperation 함수를 실행한다.

Model에서 계산 로직을 위해 만들어놓은 프로퍼티들을 활용하여 계산하고 데이터들을 가공한다.

뷰모델 안에서 계산한 뒤 displayText에 넣어주면 뷰의 displayLabel.text와 바인딩 되어 있기 때문에 

계산기 안에 계산결과가 잘 나타나는 것을 확인할 수 있다.

 

MVVM 장점

View 로직과 비즈니스 로직이 분리할 수 있어 생산성이 높다. (UI를 알지 못해도 개발이 가능)

의존성이 제거되었기 때문에 테스트하기에 용이하다. 각각 독립적으로 테스트를 할 수 있다.

또한  View와 ViewModel이 1:N 관계이므로 중복되는 로직을 모듈화하여 여러 View에 재사용할 수 있다.

 

MVVM 단점

MVC에 비해 설계가 복잡하다. 간단한 프로젝트는 MVC보다 생산성이 떨어질 수 있다.

 

 

마치며

MVVM패턴이 MVC의 문제점인 뷰와 컨트롤러의 의존성을 해결해줌으로써 UI와 비즈니스 로직을 각각 테스트 할 수 있는 것 같다.

더 심화적으로 MVVM패턴에서 UI와 비즈니스 로직 각각 테스트 해보고싶다.

 

 

글 읽어주셔서 감사합니다 :)

제가 잘못 알고 있는 내용이 있거나 말씀해주실 부분이 있다면 댓글 한 번 적어주시면 정말 감사하겠습니다.