(디자인 패턴) MVC, MVP, MVVM 패턴

✋ (디자인 패턴) MVC, MVP, MVVM 패턴

 

실무에서 가장 많이 적용되고 알려져있는 패턴들입니다.

다음과 같이 이 패턴들이 작업공간에서 3가지부분으로 나눈 이유는 

각 계층을 분리시킴으로써 코드의 재활용성을 높이고 불필요한 중복을 막기위해서입니다.


Model과 VIew의 의존성을 어떻게 구성하고 제어하는지에 따라 각 패턴이 분류 됩니다.

 

세가지 패턴 모두 공통적으로 Model과 View가 들어가있습니다.

 

 

 

⚡️ MVC, MVP, MVVM 축약

MVC => Model - View - Controller

MVP => Model - View - Presenter

MVVM => Model - View - ViewModel

 

 

 

📌 3가지 패턴 관점에서 MVC 설명

MVC 패턴

 

사용자의 입력은 Controller로 들어갑니다.
View-Controller 관계는 One-to-Many 또는 간혹가다 Many-to-Many방식입니다.
Controller는 따라서 원하는 View를 선택 가능합니다.

 

View 는 Model과 서로간의 연관성이 없습니다. (* Observer 방식으로 간접적으로 알 수 있어요)

MVC 방법론의 경우 규모가 커질수록 Controller도 비례해서 커집니다.

 

 

 

📌 3가지 패턴 관점에서 MVP 설명

MVP = Model + View + Presenter

MVP

 

사용자의 입력은 View를 통해서 입력하게 됩니다.

View-Presenter관계는 One-to-One입니다.
View 는 Presenter를 참조하고, Presenter 는 View를 참조합니다. ( 서로간의 연결 결합 고리가 강합니다 )
View 는 Model에게 영향을 끼칠 수 없습니다. ( * MVC와 비슷합니다.)

다른점은 Presenter는Model의 데이터를 수정하고, 데이터를 가져오는 것이 가능하다는 점입니다.

결론적으로 특징은 View와 Model 은 그 사이의 연결고리인 Presenter를 통해서만 왔다갔다 할 수 있습니다.
하지만 View-Presenter 관계는 서로 강한 결합을 가지게 됩니다.
그리고 마지막으로 View-Presenter 일대일 관계로 인해 각각의 View마다 각각의 Presenter가 존재하게 됩니다.

그러므로 MVP 패턴으로 짜게 될 경우 코드의 수는 증가하게 됩니다.

 

📌 3가지 패턴 관점에서 MVVM 설명

MVVM = Model + View + ViewModel

 

MVVM패턴

사용자의 입력은 View를 통해서 입력하게되고 입력된 View안에 값을 바탕으로 ViewModel의 값이 변경됩니다

View-ViewModel 관계는 One-to-Many입니다.

 

다음 그림에서 보이듯이 
1. View 는 Model에 영향을 끼치지 않습니다.
2. View는ViewModel에게 영향을 끼칩니다.
3. ViewModel은 Model의 데이터를 수정합니다.
4. ViewModel은 Controller의 역할을 합니다.
5. ViewModel은 특정View 에게 맞춰진 Model입니다.

 

그로 인해, View 는ViewModel 만을 고려합니다.

결국, ViewModel과 View는 서로간의 의존성을 Data Binding을 통해 해결합니다.

**Vue.js 는 MVVM 패턴을 기반으로 형성되었습니다. .vue확장자가 ViewModel의 역할을 합니다.

 

 

 

📌 마무리

 

MVC패턴은 개발자가 Controller내의 로직을 다루고 Controller는Model 을 통해 가져온 데이터를, View 에게 전달합니다.
간단히 말하자면, View는 웹 화면, Controller는 서버, Model 은 데이터베이스라고 할 수 있습니다.

MVP와 MVVM는 MVC에서 파생된 또 하나의 개발방법론입니다.

그렇다는 의미는 MVC 를 먼저 이해하는 것이 기본 베이스입니다.

MVC를 간략히 방법론의 관점에서 먼저 다루는 것이 중요합니다.

우선 MVC에서의 Controller 는 Model에게 직접 영향을 끼칠 수 있습니다.
하지만 Model 은 Controller, View와 직접적인 관련은 전혀 없고, 간접적인 ( BroadCast) 방식으로 전달합니다.

*Observer 디자인패턴을 보게 되면 Model은 어떤 것과도 관련이 없는 독립적인 존재입니다.

Controller는 View에게 영향을 끼치지만 그 역은 성립이 되지 않습니다.
이에 따라 Controller 는 원하는 View를 선택할 수 있지만 역은 불가능합니다.

따라서 View와 Controller의 관계는 일대다 관계를 유지하고 View는 Controller에 영향을 끼칠 수 없습니다.