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

현재 진행한는 앱 프로젝트를 MVC 디자인 패턴을 이용하여 진행하고 있었는데, 요즘 실무에서는 MVP 패턴이나 MVVM 패턴을 주로 사용한다는 이야기를 듣고 이 두 디자인패턴은 무엇인지 궁금해졌다. 

 

MVC, MVVM, MVP 디자인 패턴은 소프트웨어에서 자주 사용된다. 

이 디자인패턴들의 특징으로는 각각의 역할을 분리해주어 결합도를 낮추고, 확장, 테스트 , 유지보수에 용이하다는 것이다.  

 

 

💡 MVC 패턴이란?

Model + View + Controller를 합친 용어로,
하나의 애플리케이션을 Model, View, Controller로 분리하여 개발하는 디자인패턴이다. 

 

Model 

View에 표시되기 위해 필요한 데이터

데이터가 어떻게 변경되고 조작될 수 있는지에 관한 규칙 정의 

 

View

사용자에게 보여지는 UI 부분

Android의 XML, 프론트엔드의 HTML 

Controller로부터 받은 UI 데이터를 표시하는 역할 

MVC패턴에서의 View는 Observer 패턴을 이용하여 Model을 관찰 (데이터의 상태 변화를 업데이트 하기 위함) 

 

Controller

사용자의 입력을 받아 처리하는 부분

Model을 통해 받은 데이터를 처리하거나, 결과 값을 View에 반환하는 역할 

View와 Model 사이의 중재자 

 

동작과정

1. 사용자의 입력(Action)들은 Controller에 들어온다. 
2. Controller는 Action을 확인하고, Model을 업데이트한다. 
3. Controller에서 업데이트된 Model을 나타내줄 View를 선택합니다.
4. View는 업데이트된 Model을 사용자에게 보여주기 위해 UI 데이터를 업데이트 합니다.

 

특징

Controller가 여러 개의 View를 선택할 수 있는 1:n 구조이다.

Controller는 View를 선택할 뿐 직접 업데이트 하지 않는다. 

(View는 Controller를 모름) 

 

장점 

가장 단순한 패턴으로 보편적으로 많이 사용되는 디자인패턴이다. 

단점

View와 Model 사이의 의존성이 높다. 

애플리케이션이 커질수록 의존성이 높은 애플리케이션은 복잡해지고 유지보수가 어렵다. 

 

 

💡 MVP 패턴이란?

Model + View + Presenter를 합친 용어로,
기존 Controller 역할을 Presenter가 대신 한다. 

Model (MVC의 Model과 동일) 

View에 표시되기 위해 필요한 데이터

데이터가 어떻게 변경되고 조작될 수 있는지에 관한 규칙 정의 

 

View (MVC의 View와 동일) 

사용자에게 보여지는 UI 부분

Android의 XML, 프론트엔드의 HTML 

Controller로부터 받은 UI 데이터를 표시하는 역할 

MVC패턴에서의 View는 Observer 패턴을 이용하여 Model을 관찰 (데이터의 상태 변화를 업데이트 하기 위함) 

 

Presenter

View와 Model을 붙여주는 접착제 역할

View를 통하여 사용자의 요청을 받으면 Model에 도움을 받아 사용자의 데이터를 처리하고 결과를 다시 View로 전달

Presenter는 interface를 통하여 View와 상호작용

(interface는 필요한 데이터를 전달하는 presenter 클래스에서 정의) 

액티비티나 프래그먼트와 같은 view 구성요소는 이 인터페이스를 구현하고 원하는 방식으로 데이터를 랜더링

 

동작과정

1. View를 통해 사용자의 입력(Action)이 들어온다.
2. View는 데이터를 Presenter에 요청한다. 
3. Presenter는 Model에게 데이터를 요청한다. 
4. Model은 Presenter에게 요청받은 데이터를 응답한다. 
5. Presenter가 데이터를 가공하고 다시 View에게 응답한다.
6. View는 Presenter로부터 데이터를 응답받고, UI 데이터를 갱신한다. 

 

특징

Presenter와 View는 1:1 관계

 

장점 

MVP패턴은 인터페이스를 통해 통신하기 때문에 MVC의 단점으로 지적되었던 View와 Model사이의 의존성이 없다.

MVC의 단점 해결

 

단점

애플리케이션이 복잡해 질수록 View와 Presenter 사이의 의존성이 높아진다. 

 

 

💡 MVVM 패턴이란?

Model + View + View Model를 합친 용어로, 
Presenter와 View 사이의 결합도를 끊는데 집중

 

Model (MVC의 Model과 동일) 

View에 표시되기 위해 필요한 데이터

데이터가 어떻게 변경되고 조작될 수 있는지에 관한 규칙 정의 

 

View (MVC의 View와 동일) 

사용자에게 보여지는 UI 부분

Android의 XML, 프론트엔드의 HTML 

Controller로부터 받은 UI 데이터를 표시하는 역할 

MVC패턴에서의 View는 Observer 패턴을 이용하여 Model을 관찰 (데이터의 상태 변화를 업데이트 하기 위함) 

 

ViewModel

View에서 표현해야할 데이터를 Observable 타입으로 관리하며,View들이 ViewModel의 데이터를 구독 요청하여

화면을 갱신

ViewModel에서 Presenter와 동일하게 View 객체를 사용하여 화면을 갱신한다면, MVP와 동일하게 ViewModel과 View는 강하게 결합됨 -> 이를 데이터 바인딩 라이브러리를 사용하여 의존성을 갖지 않도록 함 -> ViewModel이 특정 View에 의존하지 않아 다른 View와도 연결 가능-> 1:N 의 관계 

 

동작과정

1. 사용자의 입력(Action)들은 View를 통해 들어온다.
2. View에 입력(Action)이 들어오면 ViewModel에 입력(Action)을 전달합니다.
3. ViewModel은 Model에게 데이터를 요청합니다.
4. Model은 ViewModel에게 요청받은 데이터를 응답합니다.
5. ViewModel은 응답 받은 데이터를 가공하여 저장합니다.
6. View는 Data Binding을 이용해 UI를 갱신시킵니다.

 

특징

MVP와 비슷해보이지만 MVP는 View와 Presenter이 1:1 관계로 형성되어 있고, MVVM은 View와 ViewModel이 n:1 관계로 형성되어있다. 또한 데이터바인딩을 이용한다면 View와 ViewModel사이의 의존성을 없앨 수 있다. 

 

장점 

MVVM 패턴은 View와 Model 사이의 의존성이 없다.

또한 Command 패턴과 Data Binding을 사용하여 View와 View Model 사이의 의존성 또한 없앤 디자인패턴이다.

각각의 부분은 독립적이기 때문에 모듈화 하여 개발할 수 있다.

 

단점

View Model의 설계가 쉽지 않다.

Databinding, LiveData 등 다른 라이브러리를 필수적으로 알아야 사용할 수 있다.