[Swift] MVVM 패턴 (아키텍처 디자인)이 무엇인지 한번 캐보자!

시나리오: MVVM 패턴에 대해 이해하기 쉽게 알아보자 

 

이전 포스팅에서 MVVM 패턴을 사용하는 이유는 코드별로 "담당하는 역할을 나눠서 관리하자!"였다.

https://artieee.tistory.com/19

[Swift] MVVM 패턴 (아키텍처 디자인) 왜? 해야하나요? MVVM 안써도 코딩은 할 수는 있지만, 쓰는데는

 

MVVM 이란 M-V-VM의 역할로 나눠보자는 것으로 각 역할을 보게 되면 

 

M(Model) :  데이터 , 데이터 캡슐화, 비즈니스 로직 담당 역할
V(View): UI 관련 담당 역할
VM(ViewModel) : 뷰에 보여질 데이터를 가공하는 담당 역할

 

 

좋아! 그럼 이제 이렇게 한번 해봐야지! 하고 프로젝트 생성하고 보면 (UIKit 기준)

ViewController가 떡하니 "응 왔어?"라고 반겨주지만 이 아이는 어느 역할로 해야 하나?라는 생각에 우리는 그렇게 반갑지 않음

 

그래서 이해하기 좋은 이미지를 딱 찾음 

 

참조사이트: https://www.raywenderlich.com/34-design-patterns-by-tutorials-mvvm 

raywenderich에서 정말 내 맘에 쏙 드는 이미지와 자료를 제공해 주었다.

 

보통 MVVM 관련 자료에서는 아래와 같이 표기를 많이 하는데 이처럼 굳이 표기를 하자면 

 

ViewController는 View와 결이 같다는 것

 

 

예제로 이해를 더 높여보도록 하자. 

간단하게 버튼을 누르면 상품정보(감자)가 보이도록 구상을 하고 진행하겠다. 

 

 

M: Model -> 구조체로 Potato를 생성 , Model에서는 UI 관련한 작업을 진행하지 않는다. 

 

 

V : View -> UI 관련한 작업을 한다. UI 배치 및 컨트롤 진행 (비즈니스 로직 관련한 작업은 진행하지 않는다.)

  

화면에 보여질 View를 작성 

ViewController에서 배치 및 UI 컨트롤 진행

VM: ViewModel ->뷰에 보여질 데이터 가공 등을 위한 비즈니스 로직 작성 

 

 

 

화면은 심플하지만 이렇게 구분해 보았다.

 

 

 

마무리 

- 코드량이 많지 않아서 ViewController 에다가 모든 코드를 다 넣고 짜도 뭐 난 괜찮은데? 굳이?라고 할 수도 있지만

실질적으로 프로젝트를 들어가게 되면 ViewController에 모든 걸 녹일 수는 없다는 걸 체감하게 될 것임.

- 차근차근 

- 책장 정리하는 걸 좋아하는데 코드를 이렇게 정갈하게 정리하는 재미가 솔솔 함 

 

 

 

 

 

관련 자료: GitHub

https://github.com/PotatoArtie/Potato-iOS/tree/master/Labs/MVVMPotato

GitHub - PotatoArtie/Potato-iOS

 

참조링크: 

https://www.raywenderlich.com/34-design-patterns-by-tutorials-mvvm 

Design Patterns by Tutorials: MVVM

https://ko.wikipedia.org/wiki/모델-뷰-뷰모델

모델-뷰-뷰모델 - 위키백과, 우리 모두의 백과사전