[디자인 패턴] (iOS) MVC 패턴을 MVVM패턴으로 바꿔보기 (feat. Combine)

 

자, 이제 정말 귀찢어지게 들었던 MVC와 MVVM 패턴에 대해서 포스팅해보자.
주제는, MVC 패턴을 MVVM패턴으로 바꾸기!!~ 그리고 그 차이점에 대해서 직접 느껴보자

개발하는 정대리님의 유튜브 강의를 참고하면서 포스팅 작성합니다.
(https://www.youtube.com/watch?v=TLX7MjtOPd0&t=873)

 

MVC와 MVVM이 뭔지 먼저 살펴보고 드루가자

 

⚫️ MVC이 뭔지 간단하게 설명해보자.

Model, View, Controller로 구성된 디자인 패턴이다. 뷰를 생성하고 관련한 비즈니스 로직과 관련한 것들은 Controller가 맡는다. 각 프로세스별로 구별되어 있기 때문에 각각의 구성 요소에만 집중해서 개발할 수 있다는 것이 장점이다. Controller에서 생성된 이벤트들을 갱신해서 View로 보여준다. View에서는 뷰를 보여줄 뿐만 아니라 유저이벤트를 받아들이고, 이 받아들여진 이벤트는 또 controller가 처리한다. Model은 애플리케이션의 데이터인 DB, 상수, 변수등을 뜻한다. 이 값들의 변화가 생기면, controller에게 알려주고, Controller가 이데이터를 갱신해준다.

이렇게 Controller를 중심으로 세 개가 상호작용을 통해서 뷰를 사용자에게 보여준다!

Swift (UIKit) 에서는 ViewController가 View와 Controller역할을 동시에 수행한다. (이름도 뷰컨 흐희희) 즉, Swift에서는 View와 Controller가 하는 일들을 모두 ViewContrller라는 한놈이 모든 역할을 수행한다. 한놈만.. 바쁘다... 그러므로,,, 앱이 커지면 커질수록 VC의 역할이 엄청 커지게 되고, 모델과 뷰의 관계가 굉장히 복잡해지고 유지보수가 힘들어질 수 있다는 단점이 있다.

🔖 Massive ViewController

https://medium.com/divar-mobile-engineering/what-is-massive-view-controller-and-how-to-avoid-it-in-swift-2fca3e7dc00

iOS의 MVC 패턴은, Massive하다라는 농담이 있다고 한다. 농담? 트루아닌가!
그래서 이 거대해지는 뷰 컨트롤러의 역할을 나눠주어야한다. 음,, 찾아보니까 DataSource를 활용해서 보여주어야 하는 데이터들을 따로 빼서 관리해주게 만들거나, Delegate나 Cordinator 패턴을 사용해서 역할을 작게 쪼개주고, VC는 되도록 View에 집중해서 보여주는 역할만 수행하도록 해준다. 

나도 이전에, VC로 개발하다가 Coordinator 패턴을 적용해보는 프로젝트에 참여해본적이 있다. (갓우디님께서 잘 설명을 남겨주셨었지,,,) 어쨌든, 다양한 방식으로 Massive VC 문제를 해결할 수 있다. (조금 더 성장하면 아래 PR과 이슈를 모두 이해해보자)

https://github.com/DeveloperAcademy-POSTECH/MC3-Team7-MoTe/issues/49

[feature] 코디네이터 패턴 적용 · Issue #49 · DeveloperAcademy-POSTECH/MC3-Team7-MoTe

https://github.com/DeveloperAcademy-POSTECH/MC3-Team7-MoTe/pull/50

[D0] 코디네이터 패턴 적용 by wody-d · Pull Request #50 · DeveloperAcademy-POSTECH/MC3-Team7-MoTe

 

⚫️ MVVM이 뭔지 간단하게 설명해보자.

MVC의 문제를 해결할 수 있는 패터중 하나가 MVVM 이다. Model, View, ViewModel 세가지 구조로 이루어져있다.

• Model: 애플리케이션에서 사용되는 데이터와, 그 데이터를 처리하는 부분이다.
• View: 사용자에게 보여지는 부분이다.
• ViewModel: View를 표현하기 위해서 만든 View를 위한 Model이다. View를 나타내주기 위한 Data를 처리해주는 비즈니스 로직들이 여기에 포함되어있다.

View 와 ViewModel 사이는 Command패턴과 Data binding (데이터바인딩) 패턴을 사용하여 구현되어있다. Command패턴과 Data Binding을 사용해서 View와 ViewModel사이의 의존성을 없앴다고 했다. ViewModel과 View는 1:n 관계이다.  (읭? 이해가 안가.. 무슨말일지 좀 더 고민해보고 다시 포스팅하자. 일대다 관계라서 그런가?)

- Command(커맨드) : 여러가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법
- Data Binding(데이터 바인딩) : 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법, 뷰모델을 변경하면 뷰에 바로 변경되어 갱신된다.

 

MVVM의 동작 순서를 보면, 위에서 하는 역할들의 이해가 조금 빠를 것이다.

1. View를 통해 사용자 이벤트를 받아들인다.
2. 받은 사용자 이벤트는 Command 패턴으로 ViewModel에 전달된다.
3. VIewModel은 Model에 데이터를 요청한다.
4. Model은 ViewModel에게 요청받은 데이터를 응답해서 보내준다.
5. ViewModel은 응답받은 데이터를 비즈니스 로직을 통해 이리저리 가공해서 저장한다.
6. View는 ViewModel과 Data Binding 하여 화면에 갱신된 새 데이터를 내보낸다.

MVVM은 View와 Model 사이의 의존성이 없고, 커맨드와 데이터바인딩을 통해서 뷰와 뷰모델의 의존성 또한 없다. 그렇기 때문에 각각이 부분은 독립적이고 모듈화 되어 개발될 수 있다는 점이 가장 큰 장점이다.

 

⚫️ MVC로 간단한 TableView를 구현했다. 

음,,, 간단한 테이블뷰를 구현했다. 테이블뷰를 만드는 방식은 생략하고, 그냥 깃허브 코드를 올려두겠다. 
내가 만든 테이블뷰는, + 버튼을 누르면 누를수록 한 cell씩 증가하도록 만들어주었다. 그리고 reset버튼을 누르면 테이블뷰 전체 내역이 사라진다.  

현재는, 이 데이터들가 추가되고 삭제되는 로직들이 전부 ViewController 내부에 존재한다. (데이터 구조가 간단해서 Model 파일을 따로 만들지 않았지만, 간단하게 설명해서 ViewController가 모든 것에 관여하고 있다고 생각하면 된다.

https://github.com/deslog/awesome-swift/tree/main/DesignPattern/DesignPattern/Patterns/MVC

GitHub - deslog/awesome-swift: swift를 활용한 모든 공부를 모아두는 감자의 뚝딱뚝딱 요리실험실 🥔🍳

 

 

⚫️ MVVM 패턴으로 바꿔보자! 

우선, 이번 프로젝트에서는 Combine을 사용해볼 것이다. Combine에 대한 설명은 잠시 나중으로 미루고, 일단 Combnie으로 구현한 MVVM 코드가 어떻게 돌아가는지 위주로 코드설명을 해보자.

 

🔖 ViewModel 생성 및 데이터 변경 로직 옮겨주기

우선  가장 크게 바뀌는 것은, 기존 코드에서 tableView에 데이터를 추가하고 reset 해주는 로직이 전부 ViewModel이라는 파일로 이동한다.  우선 없었던 ViewModel 파일을 만들어주고, 그 안에다가 기존 ViewController에 있던 @objc 함수들을 옮겨주었다.

import Foundation
import Combine

class ViewModel: ObservableObject {

    // MARK: - property

    @Published var tempArr = [String]()
    var arrCnt = 0

    // MARK: - life cycle

    init() { }

    // MARK: - func

    @objc func addData(_ sender: Any) {
        arrCnt += 1
        tempArr.append("\(arrCnt)번째 데이터 추가")
    }

    @objc func resetData(_ sender: Any) {
        arrCnt = 0
        tempArr = []
    }
}

• @Published: 데이터가 변경되는 것을 감지할? 것을 넣어준다. 
• arrCnt: 이전에 ViewController에 있었던 변수, 변경되는 변수를 가져왔다.
• addData / resetData: 두 개의 메서드를 가져와서 넣어주었다.

 

🔖 ViewModel을 생성했으면, ViewController에서 viewmodel을 통해서 데이터를 갱신받게 만들자.

1️⃣ 우선 Combine을 import 해주고, viewmodel을 선언해주자.

import Combine

var disposalbleBag = Set<AnyCancellable>()
var viewModel: ViewModel = ViewModel()

diposalbleBag은 combine을 할때 가장 기본적으로 설정되는 아이이다. 이 부분에 대해서는 combiine 설명포스팅으로 나중에 다시 올리겠다! 어쨌든 이렇게 추가해줘야한다.

간단하게 설명하자면, disposalbalbag은 말그대로 메모리에서 넘겨지는 데이터를 태워주기 위해서 선언해준다. 데이터를 subscribe하고 남은 데이터들을 담아준다고 생각하면 된다. (bag! 💼)

2️⃣ Button에 설정된 타겟과 action을 Viewmodel에 속한 메서드들로 바꿔주자.

private lazy var resetButton = UIBarButtonItem(title: "Reset",
                                               style: .plain,
                                               target: self.viewModel,
                                               action: #selector(viewModel.resetData(_ :)))
private lazy var addButton = UIBarButtonItem(image: UIImage(systemName: "plus.circle"),
                                                 style: .plain,
                                                 target: self.viewModel,
                                                 action: #selector(viewModel.addData(_ :)))

3️⃣ ViewModel에서 데이터를 바인딩해주는 메서드를 만들어주자.

지금 내 코드에는 데이터를 바인딩해주는 코드 한덩어리와, 상황에 따라 다른 function을 실행시켜줘야할때 function을 바인딩해주는 덩어리 두덩어리로 코드를 작성해두었다.

fileprivate func setBindings() {
        // 데이터에 대한 바인딩
        viewModel.$tempArr.sink{ (updatedList: [String]) in
            self.tempArr = updatedList
//            self.tableView.reloadData()
        }.store(in: &disposalbleBag)

        // 액션에 대한 바인딩 (뷰와 관련한 함수 로직도 전부 뷰모델에 있고, 그 액션을 바인딩해주는 방법)
        viewModel.dataUpdateAction.sink{ (addingType: ViewModel.AddingType) in
            print("adding타입은 이것 \(addingType)")
            switch addingType {
            case .add:
                self.tableView.reloadData()
            default:
                self.tableView.reloadData()
            }
        }.store(in: &disposalbleBag)
    }

- tempArr: Viewmodel에서 published로 선언되어있다. 이 데이터가 전달되어 왓다갓다 되면서 바인딩 되어질 것이다.

- sink: 설명을 보면 아래와 같이 나와있다. 구독한다라고 흔히 이야기한다. 어떤 published된 데이터를 붙여줄건지 정해주는 역할을 한다. 여기서는 tempArr이다.

- store:  구독하고 남은 아이들을 여기다가 담아주자! 의 의미

즉, 설명하자면 sink되어 들어오는 데이터들을 tempArr에 넣어주겟다는 의미의 코드가 된다. 클로저를 사용해서 내부에 updatedList를 tempArr에 넣어주었다! 

dataUpdateAction함수는, 버튼을 클릭할 때 특저 액션을 넣어주고 싶어서 한번 넣어봤다. 위 코드에서는, AddingType이라는 enum타입을 전달받는데, addButton이 눌리면 .add를 전달하여 특정함수 (여기서는 그냥 reloadData()를 해주었다.)를 실행시켜줄 수 있도록 했다. reloadData는 사실 tempArr를 sink받을 때 넣어도 되지만 (주석처리되어 있음) 만약 상황에 따라 다른 reload()를 해주어야하는 상황이 온다면, 아래처럼 action에 대한 binding도 따로 구현해서 만들어줘야한다!

 

설명이 조금 잘 됐는지,, 모르겠지만, 일단 '개발하는 정대리님'의 영상을 보면 더 수월하게 이해가 가능하다. 그리고, 전체 코드를 보면 더 이해가 빠를 것이다!

개발하는 정대리님의 유튜브 강의를 참고하면서 포스팅 작성합니다.
(https://www.youtube.com/watch?v=TLX7MjtOPd0&t=873)

https://github.com/deslog/awesome-swift/tree/main/DesignPattern/DesignPattern/Patterns/MVVM

GitHub - deslog/awesome-swift: swift를 활용한 모든 공부를 모아두는 감자의 뚝딱뚝딱 요리실험실 🥔🍳

 

 

이렇게 직접 내가 MVVM을 구현해봤다. 물론, 지금은 좋은 튜토리얼 강의와 아주 간단한 작업만 수행해주었기 때문에 할만하네! 라는 말이 나왔던것 같다. 내 목표는 동식이 개발이 끝나면, 동식이 프로젝트 전반을 MVVM으로 바꿔보는것이다! 

 

---

📖 Reference

https://beomy.tistory.com/43

[디자인패턴] MVC, MVP, MVVM 비교

https://github.com/TuenTuenna/ios_uikit_dynamic_tableview/tree/fetch_more

GitHub - TuenTuenna/ios_uikit_dynamic_tableview