[iOS] MVVM 디자인 패턴 정리 및 예제코드

www.raywenderlich.com/34-design-patterns-by-tutorials-mvvm 에 나오는 내용을 기반으로 번역 + 제가 공부한 내용을 토대로 정리했습니다. 혹시라도 잘못된 부분이 있다면 댓글로 남겨주세요 :) 

Design Patterns by Tutorials: MVVM

 

지난번 MVC 패턴에 이어 오늘 정리할 내용은 MVVM 디자인 패턴입니다. ㅎㅎ

앞서 MVC패턴은 다양한 로직을 Controller에서 처리하다 보니 Controller가 비대해지는 문제가 있다고 했는데요. MVVM패턴은 View에 업데이트할 데이터를 View Model에서 처리함으로써 Controller가 복잡해지는것을 줄여줍니다. (기존 MVC 패턴 에서는 ViewController에서 처리)

ex) 우리가 서버로부터 애완동물의 출생일을 받아온다고 가정해봅시다. 우리가 뷰에 표시할 정보가 애완동물의 나이라면, 나이를 구하기 위해 서버에서 받아온 출생일을 현재 날짜로부터 빼고 그 값을 통해 몇 살인지 구한 후 반환해주어야 합니다. MVC패턴의 경우 이 로직을 Controller에서 담당했다면 MVVM패턴에서는 ViewModel이 담당하게 됩니다. 

따라서 MVVM구조를 간단하게 정리하자면 다음과 같습니다. 

Model = 데이터 캡슐화

View = 시각적요소, 컨트롤 표시..(UI반영하는 코드 & 생명주기 관리 코드 등등)

ViewModel = Model 데이터를 View에 맞게 가공 및 처리 (뷰에 반영될 데이터 비즈니스 로직 담당)

 

직접 코드를 살펴보며 설명드리겠습니다. 코드는  github.com/lsh424/MVVM_iOS에 올려두었습니다. 

프로젝트를 다운받으신 후 열어보시면 다음과 같이 폴더링이 되어있을 텐데요. 

 

뷰(DogView)를 코드로만 구성할 경우와 스토리보드를 사용하여 구성할 경우 두 가지 경우에 대해 작성해 두었습니다.

여기서는 코드로 뷰를 구성했을때 기준으로 설명드리겠습니다. 

위 뷰처럼 강아지 이미지와 품종, 나이 그리고 입양 가격을 표시해볼 건데요. 우리가 갖고 있는 데이터 (만약 서버가 있다면 서버로부터 받아오는 데이터)에는 name(String), birthday(Date), breed(편의상 enum type으로 하겠습니다), imageURL(String)가 있다고 합시다. (실제로는 로컬 이미지를 사용할거기 때문에 실제 코드에서는 imageURL대신 imageName으로 사용하겠습니다.)

그럼 모델로 표현하면 다음과 같이 나타낼 수 있습니다.

이제 모델을 사용해 받아온 데이터를 가공하기위한 뷰 모델을 다음과 같이 만듭니다. 여기서 name과 imageName 같은 경우 그대로 사용할 거기 때문에 별다른 과정이 들어가 있지 않지만 뷰에 띄워 줄 나이의 경우 모델을 통해 받아온 데이터를 바로 사용하기 힘들기 때문에 뷰 모델을 통해 가공해줍니다. 그리고 어떤 품종인지에 따라 가격을 반환합니다.

우리가 데이터를 띄워줄 DogView의 경우 다음과 같습니다. UI와 Layout관련 코드들이 들어가 있습니다.

마지막으로 ViewController 입니다 ㅎㅎ

이 ViewController 코드에서 뷰에 가공한 데이터를 설정해주는 코드는 viewModel.configure(dogView) 이 부분입니다.

간단한 코드이다 보니 전반적으로 이해하시는데 무리 없으실 거라 생각합니다!

참고) 이 예제는 비즈니스로직만 분리한 아주아주 간단하 예제로 뷰와 뷰 모델간의 바인딩등은 다루지 않았습니다. RxSwift, RxCocoa를 사용한 MVVM을 공부하고 싶으시다면, 아래 영상을 추천드립니다 :)

https://www.youtube.com/watch?v=iHKBNYMWd5I 

혹시 잘못된 부분, 이해가 잘 안가시는 부분이 있다면 댓글 남겨주세요~!

요약)

MVVM의 장점: 테스트 용이성 (뷰 모델에는 UIKit 관련된 코드가 없으므로 UI에 독립적인 테스트 가능), Controller 부담 경감

MVVM의 단점: 바인딩을 도와주는 라이브러리를 함께 사용하지 않으면, 많은 기반 코드를 작성해야 함

Model = 데이터 캡슐화

View = 시각적 요소, 컨트롤 표시..(UI반영 하는 코드 & 생명주기 관리 코드 등등)

ViewModel = Model의 데이터를 View에 맞게 가공 및 처리 

(ViewModel이 변경될 때마다 해당 ViewModel과 관련된 View 자동 반영)

 

참고)

academy.realm.io/kr/posts/krzysztof-zablocki-mDevCamp-ios-architecture-mvvm-mvc-viper/

iOS 애플리케이션 아키텍처 : MVVM, MVC, VIPER 전격 비교

www.toptal.com/ios/swift-tutorial-introduction-to-mvvm

Swift Tutorial: An Introduction to the MVVM Design Pattern