[UIKit][MVVM][ProjectWithGitAPI] MVVM 패턴 정리

ProjectWithGitAPI

안녕하세요!

이전에 혼자 Git API를 이용한 작은 프로젝트를 진행했습니다.

당시에는 MVVM 아키텍처로 구현하려고 했는데....

진행하다 보니 스스로 아키텍처 패턴에 대한 이해가 낮은 게 느껴지더라구요.

 

그래서 아키텍처 패턴을 다시 학습하고!

동일한 기능을 다양한 아키텍처 패턴으로 구현하는 프로젝트를 진행하려고 합니다.

(최대한 아키텍처 패턴을 준수하도록 신경 쓰면서 코드를 짰습니다.)

 

해당 프로젝트가 규모는 작아도 Rest API, 네트워킹, 이미지 Caching, 페이징 처리,

외부 라이브러리 사용 등등 배웠던 기술들은 거의 다 적용되었습니다.

그래서 ProjectWithGitAPI 라는 이름으로 아키텍처 패턴을 공부하기 위한 프로젝트로 채택하게 되었습니다.

(MVP 패턴 정리 글 링크)

(MVC 패턴 정리 글 링크)

MVVM

이번 프로젝트에서는 MVVM 패턴을 사용해보았습니다!

먼저 MVVM에 대해 설명해볼게요.

MVVM의 역할 분담

MVVM 패턴은 Model - View - ViewModel 로 이루어져 있습니다.

제가 이해한 MVVM의 역할 분담은 이렇게 되어있습니다.

- Model:
비즈니스 로직

Model은 데이터를 가져오거나 저장하는 데이터 처리 자체에 대한 로직을 담당합니다.
MVC의 Model과 거의 같습니다.

- View:
UI, 프레젠테이션 로직

View는 오로지 UI와 ViewModel에서 받아온 데이터를 화면에 어떻게 보여줄 것인지만 담당해야 합니다.

이것을 두고 MVVM에서 View를 두고 멍청하다거나 수동적(Passive) 이라는 표현이 있습니다.

다시 말해 View를 멍청하게 할수록, 수동적으로 만들수록 MVVM에 적합한 View입니다.

그러면 어떻게 멍청하고 수동적이게 만들 수 있을까요?(사실 같은 말 입니다.)

 

1. 비즈니스 로직을 빼야합니다.(멍청)

2. 데이터를 직접 처리하지 않고 최대한 받아온 데이터로 사용합니다.(수동)

 

View에서 직접 네트워킹을 요청하거나, 로직을 사용하지 않습니다.

유저의 Input은 ViewModel로 넘겨버립니다.

A라는 데이터에 +1 을 하는 간단한 처리도 가급적 ViewModel로 넘겨야합니다.

 

그리고 ViewModel에서 View로 데이터를 줄 때,

View에서 바로 사용 가능한 형태로 넘겨주는것이 좋습니다.

(추가적인 데이터 처리 과정을 최소화 하도록)

- ViewModel:
중간 역할과 비즈니스 로직

ViewModel은 중간 역할을 담당합니다.

중간에서 View의 Input을 적절하게 Model로 넘기고
Model에서 가져온 데이터를 View를 위해 어떻게 가공할지에 대한 로직을 담당합니다.

View를 위한 Model이라 ViewModel이라고 생각하시면 이해하기 편합니다!

 

그래서 MVVM에서 코드의 대략적인 흐름은 다음과 같이 진행됩니다.

(네트워킹의 경우)

1. 유저가 검색 버튼을 누른다(View에서 Input 발생)

2. View는 Input을 ViewModel로 전달한다.

3. ViewModel은 Model에 네트워킹 요청을 시킨다.

4. Model은 응답 결과를 ViewModel로 넘긴다.

5. ViewModel은 응답 결과를 가공해서 View로 넘겨준다.

6. View는 받아온 데이터를 화면에 표시한다.

데이터 바인딩의 필요성

굵은 선으로 소유관계가 표시되어 있는데 

View -> ViewModel -> Model 이렇게 되어있잖아요?

 

View는 ViewModel을 알고 ViewModel은 Model을 알지만 반대로
View <- ViewModel <- Model 이렇게는 알지 못합니다.

 

그래도 위에 4번이랑 5번처럼 서로가 소통할 필요가 있잖아요?
여기서 이제 데이터 바인딩이 필요해집니다.

 

흥미로운 점은 원래 MVVM이 생긴 개발 환경에서는
시스템적으로 데이터 바인딩을 지원해주었다고 합니다...

UIKit은 그런거 없으니 직접 구현해야 하기 때문에 러닝 커브가 있는거 같아요.

 

해당 프로젝트는 데이터 바인딩을 위해 RxSwift를 사용했습니다.

아래 제가 짧게 정리한 글들이 있어요.

- [RxSwift] RxSwift 입문, 찍먹하기(1)(소개 ~ 설치)

- [RxSwift] RxSwift 입문, 찍먹하기(2)(기본적인 사용 ~ Observable)

(하지만 Input, Output 패턴이나, Drive, bind 같은 건 정리를 못했습니다....으음!)

---

읽어주셔서 감사합니다!

그리고 잘못된 부분에 대한 지적은 언제나 감사합니다!

 

아래는 ProjectWithGitAPI 프로젝트 링크들입니다.

코드를 보시면 구체적으로 어떻게 구현되어 있는지 알 수 있습니다.

 

MVVM

https://github.com/kangsworkspace/MVVMProjectWithGitAPI

GitHub - kangsworkspace/MVVMProjectWithGitAPI

MVPhttps://github.com/kangsworkspace/MVPProjectWithGitAPI

GitHub - kangsworkspace/MVPProjectWithGitAPI

MVC

https://github.com/kangsworkspace/MVCProjectWithGitAPI

GitHub - kangsworkspace/MVCProjectWithGitAPI