디자인패턴 - MVC / MVP / MVVM

디자인 패턴이란 프로그램이나 어떤 특정한 것을 개발하는 중에 발생했던 문제점들을 정리하여

상황에 따라 간편하게 적용해서 쓸 수 있는 것을 정리해 특정한  규약을 통해 쉽게 쓸 수 있는 형태를 만든 것을 말한다.

 

 

MVC, MVVM 등 은 소프트웨어 설계와 관련된 디자인 패턴이다.

소프트웨어 공학에서의 '흔히 사용되는' 설계 패턴을 의미한다.

 

1. MVC

Model + View + Controller 를 합친 용어이다.

 

model

데이터베이스와 소통하며, 데이터를 가지고 올 수 도 있고 가지고 있을 수 도 있다.

Controller에게 데이터를 전달한다.

model이 view와 직접 소통하는 일을 없다!

 

View

유저가 보는 화면을 보여주게 하는 역할이다.

데이터를 받고 그리는 역할을 수행한다.

오직 Controller와만 소통한다. Controller에게 액션이나 데이터를 전달만 하고 전달 받기만 한다.

 

Controller

뷰에서 액션과 이벤트에 대한  input값을 받는다.model에게 전달해주기 전에 데이터를 가공할 수 있다.view에게 model에게 받은 데이터를 가공할 수 있다. ( 이게 먼 소리야..?!?!?!?)

 

사용자가 controller를 조작하면 controller는 model을 통해서 데이터를 가져오고 그 정보를 바탕으로 시각적인 표현을 담당하는 view를 제어해서 사용자에게 전달하게 된다.

 

Controller가 view도 제어하기 때문에 아래 그림처럼 그려야 좀 더 맞을 듯 하다!

MVC의 동작

사용자의 Action들은 Controller에 들어오게 된다.

 

Controller가 사용자의 action을 확인하고 model을 업데이트한다.

controller는 또한 model을 나타내줄 view를 선택한다.

 

view는 model을 이용하여 화면을 나타낸다.

 

MVC의 장점 과 단점

장점 

MVC 패턴은 가장 단순하여 보편적으로 많이 사용되고 있는 패턴이다.

단점

View와 Model사이의 의존성이 높다는 단점이 있다.

View와 Model의 높은 의존성은 어플리케이션이 커질수록 복잡해지고 유지보수를 어렵게 만들 수 있다.

---

2. MVP

Model + View + Presenter 를 합친 용어이다.

Model과 View는 MVC 패턴과 동일하고 Controller대신 Presenter가 존재한다.

Presenter

View에서 요청한 정보로 Model을 가공하여 View에 전달해주는 부분이다.

View와 Model을 붙여주는 접착체같은 역할

---

Presenter는 View와 Model의 인스턴스를 가지고 있어 둘을 연결하는 접착제 역할을 한다.

Presenter와 View는 1:1 관계이다.

 

MVP의 동작 

사용자의 Action들은 View를 통해서 들어온다.

View는 데이터를 Presenter에 요청한다.

Presenter는 Model에게 데이터를 요청한다.

Model은 Presenter에서 요청받은 데이터를 응답한다.

Presenter는 View에게 데이터를 응답한다.

View는 Presenter가 응답한 데이터를 이용하여 화면을 나타낸다.

 

MVP의 장점 과 단점

장점 

MVP의 장점은 View와 Model의 의존성이 없다는 것이다. ( Presenter을 통해서만 데이터를 전달 받기 때문!)

MVC패턴의 단점을 해결하였다.

단점

View와 Model사이의 의존성은 해결되었지만, View와 Presenter사이의 높은 의존성을 가지는  단점이 있다.

어플리케이션이 복잡해질 수 록 View와 Presenter사이의 의존성이 강해지는 단점이 있다.

---

3. MVVM

Model + View + View Model 를 합친 용어이다.

View Model 

View를 표현하기 위해 만든 View를 위한 Model이다.

View를 나타내주기 위한 Model이자 View를 나타내기 위한 데이터 처리를 하는 부분이다.

 

---

MVVM 패턴은 Command 패턴과 Data Binding 두 가지 패턴을 사용하여 구현되었다.

Command 패턴과 Data Binding을 이용하여 View 와 View Model 사이의 의존성을 없앴다.

View Model 과 View는 1:n 관계이다.

 

MVVM의 동작 

사용자의 Action들은 View를 통해서 들어온다.

View에 Action이 들어오면. command 패턴으로 View Model에 Action을 전달한다.

View Model은 Model에게 데이터를 요청한다.

View Model은 응답 받은 데이터를 가공하여 저장한다.

View는 View Model과 Data Binding하여 화면을 나타낸다.

 

MVVM의 장점 과 단점

장점 

MVVM패턴은 View와 Model사이의 의존성이 없다. 또한 Command 패턴과 Data Binding을 사용하여 View 와 View Model사이의 의존성 또한 없앤 디자인 패턴이다.각각의 부분은 독립적이기 때문에 모듈화 하여 개발할 수 있다.

단점

View Model의 설계가 쉽지 않다.

 

 

 

 

 

MVC 디자인 패턴 - 생활코딩

Web: React Flux 패턴

 

[개발자 면접준비]#1. MVC패턴이란

 

MVC란? (MVC design pattern) - 하나몬

 

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