개인 프로젝트(Bookmark-kotlin)를 통해 알아보는 MVC-MVP-MVVM

Bookmark-kotlin

 

해당 프로젝트는 MVVM 패턴으로 구현되어있다. MVVM패턴에 대해 정리하고 MVC - MVP 패턴과의 비교를 통해 예전에 확실하게 감을잡지 못했던 부분들을 다시한번 정리해보려한다.  

 

프로젝트의 내용은 간단하다. Bookmark를 저장하고 저장된 Bookmark의 정보를 활용해 편집/삭제를 하거나 웹뷰를 통해 웹사이트를 검색하는 기능을 구현하였다. 메인 화면에서 Bookmark 리스트를 표현하고있는 화면을 기준으로 정리해보자. 

 

MVC

Model + View + Controler

Model

Bookmark의 데이터에 해당한다. url, title, favicon과 같은 상태정보를 가지고있는 객체이다. 

View

실제 표시되는 영역이며 메인화면을 나타내는 main_act.xml이 이에 해당한다. View에서는 표시되는 UI와 사용자가 상호작용할 때 Controller에 전달하는 역할을 한다. Model에 대한 정보를 완전히 모르는 상태이기 때문에 단순히 UI가 눌렸다/안눌렸다 등의 간단한 정보를 전달하게 된다. Model에 대한 정보가 없기때문에 눌렸다/안눌렸다를 전달하더라도 Controller에서의 처리에 따라서 다양한 데이터와 각각의 상태에 따라 유연하게 로직을 구현할 수 있다. 

Controller

사용자 -> View와 Model 사이에서 서로가 연동하여 실질적으로 구현하고자 하는 로직를 작성하는 곳이다. 사용자의 상호작용을 View가 Controller에 전달하면 그에맞는 상황을 Model의 데이터와 비즈니스 로직을 활용하여 최종적인 결과물을 만들어내는 곳이라 볼 수 있다. 안드로이드에서 Activity, Fragment 등을 UI Controller라고 부른다. 따라서 main_act.xml과 상호작용하는 MainActivity가 Controller에 해당한다고 볼 수 있다. 

 

MVC는 모델과 뷰를 분리한다. 모델이 어느곳에도 묶여있지 않기 때문에 모델에 대하여 쉽게 테스트를 진행 할 수 있다. 

MVC의 문제점

• 컨트롤러는 안드로이드API에 종속되므로 유닛 테스트가 어렵다. 
• 컨트롤러와 뷰가 긴밀하게 결합되기 때문에 뷰를 변경하면 컨트롤러도 변경해야한다. 
• 앱이 커질수록 컨트롤러에 수많은 코드줄이 형성되어 유지보수를 어렵게 한다. 

MVP

Model + View + Presenter

 

Model

MVC 모델과 동일한 역할 

View

UI Controller(Activity, Fragment)를 View의 일부분으로 간주한다. 즉, MVC 컨트롤러에서 뷰를 표시하는 로직과 모델의 상태에 따른 뷰의 변화를 구현하는 로직을 담당하게 되는데 MVP에선 뷰와 컨트롤러를 하나로 보기때문에 컨트롤러에선 뷰를 표시하는 부분만 담당하고 나머지는 Presenter에게 역할을 분담한다고 볼 수 있다. 

 

Presenter

MVC의 컨트롤러와 같지만 뷰와 연결되지 않는 인터페이스라는 점이 다르다. 안드로이드API에도 종속되지 않기 때문에 유닛테스트가 어려웠던 문제를 해결한다. 또한 MVC 컨트롤러에선 뷰의 표시에 해당하는 로직과 모델의 상태에 따라 작성되는 코드가 섞여있었는데 Presenter에는 뷰를 표시하는 로직이 없으므로 모델과 상호작용하는 코드만 작성하면 된다.

 

MVC의 컨트롤러의 문제점을 MVP를 통해 보완하였다. 

MVP의 문제점 

• 코드의 비중이 뷰를 표시하는 코드보다는 모델과 상호작용하는 코드가 더 많기 때문에 Presnter에도 시간이 지남에 따라 코드가 늘어나는 문제가 있다. 

MVVM

Model + View + ViewModel

 

Model

MVC 모델과 동일한 역할 

View

데이터바인딩을 사용하여 act_main.xml등과 같은 XML 레이아웃을 작성한다. 이렇게 작성된 레이아웃은 컨트롤러에서 뷰를 표시하는 로직없이 해당 레이아웃의 데이터 바인딩을 연결하는 로직만으로  레이아웃과 내부의 모든 뷰에 접근할 수 있게된다. 또한 XML 레이아웃에 뷰모델을 연결하여 뷰모델 내부에서 모델의 상태를 관찰하고있는 Observer 데이터에 의해 컨트롤러에서의 뷰 표시,변동 로직없이 UI 완성할 수 있다.  

ViewModel

LiveData를 통해 모델의 데이터를 관찰한다. 이렇게 관찰되는 데이터를 XML 레이아웃에서 접근할 수 있으며 원하는 곳에 셋팅하여 데이터를 업데이트 한다. 여기서 뷰는 뷰모델에 접근할 수 있지만 뷰모델은 뷰에 접근할 수 없다. 

 

MVVM에선 뷰를 표시하는 로직과 모델과의 상호작용에 의한 뷰의 변경 로직이 획기적으로 줄어들게 되었다. 또한 뷰모델은 뷰에대한 의존성이 전혀 없으므로 유닛테스트를 더욱 쉽게 구현할수 있도록 도와준다. 모델이 변경되는 시점에 LiveData로 관찰하는 변수가 제대로 설정되었는지 확인하면 되는 것이다. 

 

 

안드로이드의 MVC, MVP, MVVM 종합 안내서

https://github.com/jhk-im/bookmark-kotlin-mvvm

GitHub - jhk-im/bookmark-kotlin-mvvm: bookmark se refactoring with kotlin