iOS Study : 8주차 - MVVM 디자인 패턴

MVVM(Model, View, ViewModel) 디자인 패턴

MVVM은 그래픽 사용자 인터페이스(뷰)의 개발을 비즈니스 로직 또는 백-엔드 로직(모델)으로부터 분리시켜서

뷰가 어느 특정한 모델 플랫폼에 종속되지 않도록 해주는 패턴이다.

 

구성 요소

모델(Model)

• 데이터, 네트워크 로직, 비즈니스 로직 등을 담으며 데이터를 캡슐화하는 역할을 맡고 있다.
• View ,ViewModel에 대한 신경은 쓰지 않는다.
  데이터를 어떻게 가지고 있을지만 걱정하며, 데이터가 어떻게 보여질 것인지에 대해서는 고려하지 않는다.

뷰(View)

• 사용자가 화면에서 보는 것들에 대한 구조, 배치, 그리고 외관에 해당하는 내용을 다룬다.
• Model을 직접 알고 있어서는 안된다.
• View는 ViewModel로부터 데이터를 가져와서 표현한다.
• 사용자와 View의 상호작용을 수신하고 이에 대한 처리를 ViewModel에 부탁한다.
  • MVC, MVP와 다르게 MVVM의 View는 보이는 부분에 대한 설정을 스스로 직접 한다.

뷰모델(ViewModel)

• View로부터 전달받는 요청을 처리할 로직을 담고 있으며 Model에 변화가 생기면 View가 알아차릴수 있도록
  신호를 보낸다.
• ViewModel은 View와 Model 사이의 중개자 역할을 하며 Presentation Logic을 처리하는 역할을 한다.
  • Presentation Logic이란 ModelView에서 View가 데이터를 더 쉽게 처리할 수 있도록 데이터 형식을
    가공하여 제공할 수 있게 데이터 형식을 가공하는 것을 말한다.

 

전체적인 동작 흐름

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

 

MVC(Model, View, Controller)와의 차이점

첫 번째

• MVC
  • 기본적으로 View와 Model은 다른 구성요소들을 알지 못하며, Controller는 View와 Model을 모두
    알고있는 형태로 구현되어야 했다.
• MVVM
  • View는 ViewModel을 알고 있으며 소유한다. 그리고 ViewModel은 Model만을 알고 있도록 구현된다.
  • Model은 다른 구성요소들을 알지 못하도록 만들어져야 한다.

두 번째

• MVC : View가 데이터를 보여주는 방식은 크게 두 가지로 나누어져 있었다.
  • Model에 View를 옵저버로 등록하여 데이터를 설정하는 방식
  • ViewController가 Model의 변경을 알아차리고 직접 View에 데이터를 설정해주는 방식
• MVVM
  • View는 ViewModel과의 데이터 바인딩을 통해 스스로 데이터를 보여준다.
    (데이터를 View에 보이게 하기 위한 설정 책임을 View 스스로가 가진다.)

세 번째

• MVC
  • 사용자 상호작용에 대해 View가 Controller에게 처리를 부탁하는 것은 Delegate Pattern, Target-Action 등을 썼다.
• MVVM
  • View가 ViewModel을 알고 있으므로 필요할 때 ViewModel 메서드를 호출하는 방식으로 구현이 가능하다.

 

UIKit / SwiftUI에서의 MVVM

UIKIt

• ViewController는 View로 취급된다.
• ViewController와 UIView의 life-cycle을 관리하면서 ViewModel을 소유한다.
• MVVM View와 ViewModel간의 데이터 바인딩은 ViewController와 ViewModel간의 바인딩으로 구현된다.
• 사용자 상호작용에 대한 처리는 ViewController에서 ViewModel의 특정 메서드를 호출하는 방식으로 구현 가능하다.

 

SwiftUI

• SwiftUi에서의 MVVM View는 View 프로토콜을 채택한 Struct가 맡는다.
• View 프로토콜을 채택한 Struct들은 ViewModel을 소유한다.
• View와 ViewModel간의 데이터 바인딩은 Property Wrapper들을 통해 구현할 수 있다.
• 사용자 상호작용에 대한 처리는 View에서 ViewModel의 특정 메서드를 호출하는 방식으로 구현 가능하다.

 

MVC - MVP - MVVM 계보

MVC

 

MVP

 

MVVM