[Design Pattern] MVVM(Model - View - ViewModel) 패턴이란? (feat. Swift)

안녕하세요 Foma 💻 입니다!

 

오늘은 정말 오랜만에 디자인 패턴을 정리하게 되었는데요.

 

그 중에서 가장 인기(?)있고 핫한 MVVM 디자인 패턴을 다뤄보려고 합니다.

 

(SwiftUI 또한 기본 디자인 패턴으로 MVVM을 사용합니다.)

 

바로 시작할게요~

---

MVVM(Model - View - ViewModel)패턴이란? 🧐

 

MVVM은 하나의 소프트웨어 아키텍처 패턴 으로 GUI 코드로 구현하는 그래픽 사용자 인터페이스(뷰)의 개발을 비즈니스 로직 또는 백엔드 로직(모델)로부터 분리시켜서 뷰가 어느 특정한 모델 플랫폼에 종속되지 않도록 해준다. MVVM의 뷰 모델은 값 변환기인데, 이는 뷰 모델이 모델에 있는 데이터 객체를 노출(변환)하는 책임을 지기 때문에 객체를 관리하고 표현하기가 쉬워진다는 것을 의미한다. 이러한 점에서, 뷰 모델은 뷰 보다는 더 모델인 것이며, 모든 뷰들의 디스플레이 로직을 제외한 대부분의 것들을 처리한다. - 위키 백과 -

 

즉, 화면을 만드는 코드와 뒤에 데이터를 처리하는 코드를 분리해서 하는 것이 바로 MVVM이 핵심이죠!

 

마이크로소프트의 켄 쿠퍼와 테드 피터스에 의해 발명되었으며 존 구스먼이 2005년 처음으로 블로그에 발표했다고 하네요!

 

(그래도 최근에 만들어졌다고 생각했는데 16년이나 되었네요..)

 

각 역할을 그림으로 살펴보면 아래와 같습니다.

 

 

 

 

특징

 

데이터 바인딩을 사용하여 뷰가 뷰모델의 값을 관찰하여 변화를 반영합니다.

---

MVVM의 장단점 👍🏻

 

장점

 

• 뷰 로직과 비지니스 로직을 분리하여 생산성을 높힐 수 있다. (UI가 나오지 않아도 개발 가능)
• 테스트가 수월해진다. (의존성이 없기 때문)
• 뷰와 뷰모델이 1:n 관계이기 때문에 중복되는 로직을 모듈화 해서 여러 뷰에 적용할 수 있다. (코드 재사용 가능)
• 많은 기업들이 애용하는 디자인 패턴이다.

 

단점

 

• 설계하기가 복잡하다. (Rx,데이터 바인딩에 대한 지식 필요)
• 뷰모델이 비대해질 수 있다.
• 데이터 바인딩으로 인한 메모리 소모가 심하다.

---

코드 구현

 

오늘은 간단하게 Rx를 사용하지 않고 MVVM을 구현해보겠습니다.

 

이전에 MVC,MVP를 구현했던 캐릭터 화면을 그대로 쓰겠습니다.

 

(간단하게 과정을 설명드리면 아래 Previous와 Next 버튼을 누르면 캐릭터 모델이 이전 또는 다음 모델로 바뀌게 되고

 

뷰는 바뀐 모델에 따라 띄우는 정보가 바뀌게 됩니다.)

 

---

Observable

 

MVVM의 핵심인 옵저버블을 구현하겠습니다.

 

먼저 Listener를 익명 클로저로 만들어놓습니다.

 

value는 didSet을 이용해서 리스너의 어떤 값이 들어오면 그에 맞게 변화하도록 만들어놓습니다.

 

bind 메서드를 통해서 현재 Observable의 리스너를 적용하고 리스너는 값이 변경되면 바로 클로져를 실행합니다.

 

import Foundation

class Observable<T> {
  typealias Listener = (T) -> Void
  var listener: Listener?
  var value: T {
    didSet {
      listener?(value)
    }
  }
  init(_ value: T) {
    self.value = value
  }
  func bind(listener: Listener?) {
    self.listener = listener
    listener?(value)
  }
}

---

Model

 

캐릭터를 구성하는 모델입니다.

 

import UIKit

struct MVVM_Character {
    
    //화면을 구성할 데이터
    let image:UIImage
    let name:String
    let gender:String
    let country:String
    
    //초기화
    init(name:String,image:UIImage,gender:String,country:String) {
        self.name = name
        self.image = image
        self.gender = gender
        self.country = country
    }
}

---

View

 

뷰는 아래와 같이 뷰모델을 소유하고 있습니다.

 

뷰모델의 프로퍼티들을 뷰의 프로퍼티와 바인딩을 시켜줍니다. (이것이 바로 데이터 바인딩입니다.)

 

즉, 뷰모델을 관찰하고 바뀌는 값에 따라서 뷰를 변화시켜준다고 설정하는 것입니다.

 

유저의 인터랙션을 받게 되면 뷰모델의 특정 메서드를 실행시켜 뷰모델 값을 바꿔줍니다.

 

한마디로 뷰에서 어떤 버튼이 눌리면 -> 뷰모델의 값이 변화하고 -> 값이 변화하면 뷰가 값에 맞게 변화하는 것입니다.

 

이렇게 보면 뷰의 코드가 MVC에 비해 훨씬 간결해진 것을 볼 수 있죠?

 

import UIKit

class MVVM_CharacterViewController: UIViewController {
    
    //MARK:- IBOutlets
    
    @IBOutlet weak var country: UILabel!
    @IBOutlet weak var name: UILabel!
    @IBOutlet weak var gender: UILabel!
    @IBOutlet weak var image: UIImageView!
    @IBOutlet weak var nextButton: UIButton!
    @IBOutlet weak var previousButton: UIButton!
    
    //MARK:- Properties
    
    private let viewModel:CharacterViewModel = CharacterViewModel()
    
    //MARK:- Life Cycle

    override func viewDidLoad() {
        super.viewDidLoad()
        bind()
    }
    
    //MARK:- Functions
    
    func bind() {
        viewModel.image.bind { [weak self] image in
            self?.image.image = image
        }
        
        viewModel.name.bind { [weak self] name in
            self?.name.text = name
        }
        
        viewModel.gender.bind { [weak self] gender in
            self?.gender.text = gender
        }
        
        viewModel.country.bind { [weak self] country in
            self?.country.text = country
        }
    }
    
    //MARK:- IBActions
    
    @IBAction func tapPreviousButton(_ sender: Any) {
        viewModel.tapButton(isPrevious: true)
    }
    
    @IBAction func tapNextButton(_ sender: Any) {
        viewModel.tapButton(isPrevious: false)
    }
}

---

ViewModel

 

우선 전체 모델 데이터는 임의로 미리 만들어놓았습니다.

 

뷰에 필요한 프로퍼티들을 Observable 타입으로 만들어놓습니다.

 

뷰에서 일어나는 인터랙션에 따라 값이 변화하도록 하는 비지니스 로직을 작성합니다.

 

import UIKit

class CharacterViewModel {
    
    //MARK:- Properties
    
    let image:Observable<UIImage?> = Observable(nil)
    let name:Observable<String?> = Observable(nil)
    let gender:Observable<String?> = Observable(nil)
    let country:Observable<String?> = Observable(nil)
    var index:Int = 0
    
    init() {
        self.image.value = characters[0].image
        self.name.value = characters[0].name
        self.gender.value = characters[0].gender
        self.country.value = characters[0].country
    }
    
    func tapButton(isPrevious:Bool) {
        if isPrevious {
            index = index > 0 ? index-1 : 0
        }else {
            index = index < characters.count - 1 ? index + 1 : characters.count - 1
        }
        self.image.value = characters[index].image
        self.name.value = characters[index].name
        self.gender.value = characters[index].gender
        self.country.value = characters[index].country
    }
}

---

실행화면 

 

---

느낀점

 

지금까지 MVVM 패턴을 사용해서 앱을 구현하면서 생각하는 방식이 변화하는 것을 느꼈다.

 

원래 MVC로 구현한다면 "버튼을 누르면 뷰가 이렇게 변화하면 되겠다"라면

 

MVVM으로는 "버튼을 누르면 뷰모델에게 알려주고 뷰모델의 값대로 뷰가 변하겠다."로 바뀌었다.

 

둘의 차이점은 MVC는 뷰를 내가 직접 빠르게 바꾸는 느낌이고 MVVM은 미리 작성해놓은 방식대로 뷰가 알아서 바뀌는 느낌이었다.

 

하지만 확실히 장단점은 있었다.

 

MVVM은 실제로 비지니스 로직이 뷰모델에 있어서 어떤 코드를 찾거나 읽을 때 훨씬 수월했다.

 

또한 미리 작성해놓은 코드를 재사용할 수도 있어서 생산적인 효율을 직접적으로 많이 느꼈다.

 

하지만 간단한 화면을 만들 때조차 머리가 복잡해지고 시간도 오래 걸렸다...

 

MVVM 패턴을 적용했으면 아무리 간단한 화면이라도 뭐든 하나부터 열까지 MVVM으로 구현해야돼!

 

라고 생각하고 시간을 많이 썼던 것 같다.

 

하지만 가장 좋은건 MVC에 적합한 화면은 MVC대로 MVVM에 맞는 화면 MVVM대로 적합한 디자인 패턴을 사용해가면서

 

생산성이나 협업의 효율을 올려주는 디자인 패턴을 적용해서 개발하는 것이 좋다고 느꼈다.

 

---

Source Code

 

각 디자인 패턴의 소스코드는 아래 깃헙에 정리해놓겠습니다!

 

GitHub - fomagran/Architecture-Example: iOS 아키텍쳐 예제 모음 🏠

---

Reference

아래 사이트를 참고했습니다.

 

Design Patterns by Tutorials: MVVM