[ Design Pattern 04 ] MVC, MVP, MVVM 의 3가지 패턴의 차이

다른 패턴들도 많이 존재하지만 현 실무에서 가장 많이 적용되고 알려져있는 패턴들입니다.

MVC => Model - View - Controller

MVP => Model - View - Presenter

MVVM => Model - View - ViewModel

다음과 같이 이 패턴들이 작업공간에서 3가지부분으로 나눈 이유는 각 계층을 분리시킴으로써 코드의 재활용성을 높이고 불필요한 중복을 막기위한 이유입니다.

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

[ MVC 패턴] (SW 개발방법론)

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에 영향을 끼칠 수 없습니다.

[ MVC 요약 설명 ]

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

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

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

MVC 패턴

[ 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 패턴으로 짜게 될 경우 코드의 수는 증가하게 됩니다.

MVP 패턴

[ MVVM 요약 설명 ]

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

밑의 MVVM패턴 그림에서 보이듯이 

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

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

따라서 의존성을 데이터 바인딩과 명령을 통해 해결합니다.

**Vue.js 는 MVVM 패턴을 기반으로 형성되었습니다.Vue.js파일이ViewModel 의 역할을 합니다.

MVVM 패턴