서론

Redux 작동 원리를 확인하면서 알게된 Flux 패턴.
React와 다른 라이브러리 등에도 쓰이면서 반드시 알아야하는 개념이다는 생각이 들었다.
그런데 Flux 패턴의 시발점이 된 녀석이 있었다?! 반드시 알아야 해!
그래서 Flux 패턴을 정리하기 전 MVC 와 친구들을 정리한다.

MVC, MVP, MVVM…? 그게 뭔디?

MVC & MVP & MVVM

소프트웨어 디자인 패턴이다.
UI와 비즈니스 로직를 분리해 코드를 관리하여, 상호 영향 없이 유지보수와 개발의 효율성을 높일 수 있는 설계 패턴이다.


MVC

MVC

Model-View-Controller

사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴이다. 1979년 최초로 소개되어, 지금까지도 널리 사용되고 있다. 후술할 MVP, MVVM 패턴의 기반이 되는 개념이다.


Controller

Input을 받아 모델에 Action을 전달해 상태를 변경한다.
데이터와 비즈니스 로직 사이의 상호동작을 관리한다.


Model

어플리케이션의 데이터와 비즈니스 로직을 관리한다.
데이터의 상태가 변경되면 뷰에 데이터를 업데이트한다.


View

사용자 인터페이스 요소를 나타낸다.
모델에서 업데이트한 데이터를 화면에 표시한다.


MVC Example

MVC 흐름


장점

  • 비즈니스 로직과 UI 로직이 분리되어 유지와 보수를 독립적으로 수행할 수 있다.
  • 로직이 분리되어 있어 확장이 유연하다.
  • 중복된 코딩을 제거 할 수 있다.

단점

  • View 와 Model 이 의존적이다.
  • 어플리케이션 규모가 커질수록 다수의 View 와 Model 이 연결되어 예기치않은 에러가 발생할 수 있다.


MVP

MVP

Model-View-Presenter

MVP 패턴은 MVC 패턴에서 파생된 패턴으로, 90년대 MicroSoft에서 사용해 알려진 패턴이다.
MVC 패턴에서 Model 과 View 의 의존 관계가 분리되고, Presenter 가 중간에서 조율하는 구조를 띈다.


Presenter

View 와 Model에서 Action과 데이터를 받고 전달하는, 중간 다리 역할을 한다.
View 에서 Action 을 전달받고, Model 에 전달하면서 새로운 데이터를 요청한다.
Model 에서 새로운 데이터를 받아, View 에 새로운 데이터를 전달한다.


Model

Presenter 에서 전달받은 Action 을 현재 데이터에 적용하고, 변경된 데이터를 Presenter 에 보낸다.


View

User의 Action 을 받아 Presenter 에 전달한다.
Presenter 에게 받은 새로운 데이터를 브라우저에 띄운다.


MVP Example

MVP 흐름


장점

  • View 와 Model 이 분리되어 의존성이 제거된다.

단점

  • View 와 Presenter 의 의존성이 강해진다.


MVVM

MVVM

Model-View-ViewModel

2005년 MicroSoft의 John Gossman이 블로그에서 발표한 소프트웨어 아키텍처 패턴. Model 과 View, View 와 View Model 의 의존성을 최소화한 형태로, 비즈니스 로직과 UI 간 상호 영향을 최소화한 패턴이다.
패턴 구현을 위해 Command 와 Data Binding 을 적극적으로 사용하는게 특징이다. Command 패턴은 View 에서 전달하는 요구 사항을 캡슐화하고, Data Binding은 View 와 View Model 의 데이터 동기화에 사용된다.


View Model

View 에서 Command 패턴으로 전달된 Action 을 Model 에 전달하면서 새로운 데이터를 요청한다.
Model 에서 새로운 데이터를 받는다.


Model

View Model 에서 전달 받은 Action 을 현재 데이터에 적용하고, 변경된 데이터를 View Model 에 보낸다.


View

View Model 에 User Action 을 Command 패턴으로 전달한다.
View Model 과 Data Binding 으로 새로운 데이터를 받아 브라우저에 출력한다.


MVVM Example

MVVM 흐름


장점

  • View 와 Model / View 와 View Model 이 분리되어 의존성이 제거된다.
  • UI 와 비즈니스 로직이 분리되어 생산성을 높일 수 있다.

단점

  • View Model 구현이 쉽지 않다.
  • 단순한 작업에 사용하기에는 부담이 된다. (제작자 피셜)
  • 아주 큰 응용 프로그램에서의 데이터 바인딩은 메모리 소모가 너무 크다. (제작자 피셜)


참고
위키피디아 MVC, MVP, MVVM
What’s a Software Design Pattern?_Lalit Singla
[디자인패턴] MVC, MVP, MVVM_버미노트
MVC, MVP 그리고 MVVM 패턴에 대하여_devowen