디자인 패턴 - MVC, MVVM 패턴
MVC 패턴
드디어 익숙한 거 나왔다. MVC 패턴은 Model, View, Controller 세가지로 이루어진 디자인 패턴으로, 애플리케이션의 구성 요소를 이 세 가지 역할로 구분하는 방식이다. 이렇게 구분하면 개발 프로세스에서 각각의 구성 요소에만 집중하여 개발이 가능해진다.
모델
- 모델은 애플리케이션의 데이터인 데이터베이스와 상수 및 변수를 뜻한다. 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신한다.
뷰
- 사용자 인터페이스 요소를 나타낸다. 모델을 기반으로 사용자가 볼 수 있는 화면을 뜻하며, 모델이 가지고 있는 정보를 별도로 저장하지 않고 단순히 화면에 표시하는 정보만 가지고 있어야 한다. 변경이 일어나면 컨트롤러에 해당 내용을 전달해야 한다.
컨트롤러
- 하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할을 하며, 이벤트 등 메인 로직을 담당한다. 모델과 뷰의 생명주기도 관리하며, 모델이나 뷰의 변경에 대한 내용을 받으면 이를 해석하여 각각의 구성 요소에 해당 내용에 대해 알려준다.
다만 개인적으로 궁금했던 것이, 요즘 트렌드 자체가 리액트 등의 라이브러리를 사용하여 별도의 프론트엔드 개발을 하여 클라이언트 사이드 렌더링을 하는 것으로 알고 있는데, 이런 경우에 정적 페이지를 반환하는 View는 더이상 쓰이지 않는 것인가?
나는 일반적으로 계층형 아키텍처를 적용하여 백엔드 애플리케이션을 개발하는데, 이 경우에 Router, Controller, Service, Repository, Database가 각각 M V C 중 어디에 해당하는지 궁금해졌다.
Repository는 모델인 Databse를 관리하기 위한 별도의 계층으로 보는 것이 타당하나, 굳이 MVC 패턴 내에서의 역할로 따져보면 모델에 가깝다고 볼 수 있을 것이다. Router과 Controller이 컨트롤러 역할을 하여 각각의 구성 요소에 해당 내용을 전달하는 역할이다. View는 사실상 프론트엔드에서 처리를 하기 때문에 JSON형태로 응답하는 API로 끼워넣을 수 있을 것 같다.
MVVM 패턴
MVVM 패턴은 MVC로부터 파생된 패턴으로, C에 해당하는 컨트롤러가 ViewModel로 바뀐 패턴이다.
뷰 모델은 뷰를 더욱 추상화한 계층으로, MVC 패턴과는 다르게 데이터 바인딩이라는 개념을 활용하여 뷰와 데이터를 동기화하는 데 유리한 패턴이다.
데이터 바인딩이란, 사용자 인터페이스 요소와 데이터 소스 간의 연결을 자동으로 관리하는 기술을 의미한다. 이게 무슨 말이냐면, UI 요소가 데이터 소스의 번경 사항을 자동으로 반역하고, 반대로 UI요소의 변경 사항이 데이터 소스에 자동으로 업데이트된다는 말이다.
그러면 MVC와 비교해보자면, MVC 패턴에서는 모델에서의 업데이트가 있으면 컨트롤러가 이를 감지하고 뷰가 갱신되도록 한다. 반대로, 뷰에서 데이터를 생성 및 수정하면 컨트롤러를 통해 모델을 생성 또는 갱신한다. MVVM 패턴에서는 이러한 중간 다리 역할을 하는 컨트롤러 없이 자동으로 이러한 변경 사항들이 업데이트 된다는 것이다.
즉, MVC 패턴은 명형형 프로그래밍 패턴을 따르는 것이며, 컨트롤러는 중간에서 뷰와 모델 간의 상호작용을 수동으로 관리하게 되며, MVVM 패턴은 ViewModel을 사용해 뷰와 모델을 간접적으로 연결하고, 데이터 바인딩을 통해 양방향으로 동기화하여 선언형 프로그래밍 접근 방식을 취한다.
정리
MVC 패턴
- Model, View, Controller로 구성되며, Controller가 중심이 되어 View와 Model의 상호작용을 수동으로 관리
- 명령형 프로그래밍 방식으로, View와 Model의 변경으로 Controller가 중재하여 반영
MVVM 패턴
- Model, View, ViewModel로 구성되며, View와 ViewModel간의 데이터 바인딩을 통한 데이터의 양방향 자동 동기화
- 선언형 프로그래밍 방식으로, UI가 데이터 상태에 따라 자동으로 업데이트
| 특성 | MVC 패턴 | MVVM 패턴 |
|---|---|---|
| 구조 | Model-View-Controller | Model-View-ViewModel |
| 데이터 동기화 | 수동 데이터 동기화 (명령형) | 자동 데이터 바인딩 (선언형) |
| 역할 분리 | View와 Model의 상호작용을 Controller가 중재 | ViewModel이 데이터와 View를 직접 연결 |
| View 의존성 | Controller가 UI 로직에 직접 접근 | ViewModel이 UI와 독립적으로 상태 관리 |
| 테스트 용이성 | View와 Controller의 상호 의존성으로 낮음 | ViewModel이 View와 분리되어 테스트가 용이함 |