MVC(Model-View-Controller)·MVP(Model-View-Presenter)·MVVM(Model-View-ViewModel)은 UI 애플리케이션을 데이터(Model)와 화면(View)으로 나누고, 둘 사이를 무엇이 어떻게 잇느냐로 구분되는 아키텍처 패턴 가족이다.
- MVC: Model은 비즈니스 데이터, View는 그 시각적 표현으로 Model을 관찰하다 바뀌면 갱신한다. Controller는 사용자 입력을 받아 Model을 실제로 바꾸는 중재자다. View가 Model에 직접 접근할 수 있다
- MVP: Controller 자리에 Presenter가 들어간다. View는 이벤트를 Presenter에게 넘기기만 하는 수동적인 존재이고, Presenter가 UI 로직을 맡아 View 인터페이스를 통해 화면을 갱신한다. 그래서 View를 대역으로 바꿔 Presenter를 테스트하기 쉽다
- MVVM: ViewModel이 View의 상태와 동작을 가진다. 선언적 데이터 바인딩(Data Binding)으로 View와 ViewModel을 자동 동기화해서 Model 전체를 View에 노출하지 않는다. 대신 둘 사이 변환 비용이 생긴다. Vue와 Knockout·AngularJS가 이 계열이다(Vue 3와 React 대응표)
| View가 아는 것 | 연결 방식 | |
|---|---|---|
| MVC | Model | View가 Model 관찰 |
| MVP | Presenter 인터페이스 | Presenter가 View를 직접 갱신 |
| MVVM | ViewModel | 데이터 바인딩 |
세 패턴의 차이는 상당 부분 계층 간 의존 방향과 결합 정도의 차이다(결합도). 템플릿은 View 자체가 아니라 View를 선언적으로 만드는 수단이라는 점도 구분해 둔다.
React는 MVC 프레임워크가 아니다. 중앙 컨트롤러나 라우터가 없는 뷰 렌더링 라이브러리이고, 데이터는 단방향으로 흐른다. 백엔드의 같은 패턴은 Spring MVC 요청 흐름·Django MVT 구조, 구독 구조는 옵저버 패턴, 표현과 동작 분리는 Presentational·Container 컴포넌트에서 이어진다.
출처: 『자바스크립트 + 리액트 디자인 패턴』 애디 오스마니 (원서 Learning JavaScript Design Patterns, 2nd Edition)