mvc_vs_mvvm.md

MVC와 MVVM 모델

소프트웨어 개발에서 아키텍처 패턴은 코드의 유지보수성과 확장성을 높이기 위해 사용됩니다. 그중 MVC와 MVVM 모델은 가장 널리 사용되는 두 가지 패턴으로, 각각의 구조와 장단점이 있습니다.

1. MVC (Model-View-Controller)

구조

• Model :데이터와 비즈니스 로직을 관리합니다. 데이터베이스와의 상호작용, 상태 관리 등이 포함됩니다.
• View :사용자 인터페이스(UI)를 담당합니다. 데이터를 화면에 출력하고 사용자 입력을 처리합니다.
• Controller :View와 Model 간의 중개 역할을 합니다. 사용자의 요청을 받아 Model을 통해 데이터를 처리하고, 결과를 View에 전달합니다.

작동 방식

1. 사용자가 View를 통해 입력합니다.
2. View가 Controller에 요청을 전달합니다.
3. Controller가 Model에 데이터를 요청하거나 상태를 변경합니다.
4. Model이 데이터를 갱신하고 결과를 Controller에 반환합니다.
5. Controller가 데이터를 View에 전달하여 화면을 갱신합니다.

특징

• 구조가 단순하며 이해하기 쉽습니다.
• View와 Controller 간 결합도가 높아 변경 시 영향이 클 수 있습니다.
• 소규모 애플리케이션에 적합합니다.

---

2. MVVM (Model-View-ViewModel)

구조

• Model :데이터와 비즈니스 로직을 관리합니다. (MVC의 Model과 동일)
• View :사용자 인터페이스(UI)를 담당합니다. (MVC의 View와 동일)
• ViewModel :View와 Model 간의 중개 역할을 합니다. UI 상태와 데이터를 동기화하며, View와 데이터 바인딩(Data Binding)으로 연결됩니다.

작동 방식

1. 사용자가 View를 통해 입력합니다.
2. View는 ViewModel과 데이터 바인딩으로 연결되어 있어 ViewModel에 입력 이벤트가 전달됩니다.
3. ViewModel이 Model에 데이터를 요청하거나 상태를 변경합니다.
4. Model이 데이터를 갱신하고 결과를 ViewModel에 반환합니다.
5. ViewModel은 데이터 바인딩을 통해 View를 자동으로 갱신합니다.

특징

• 데이터 바인딩을 통해 View와 ViewModel 간 결합도가 낮습니다.
• UI와 비즈니스 로직이 분리되어 재사용성과 유지보수성이 높습니다.
• 대규모 애플리케이션이나 복잡한 UI 상태를 관리하는 데 적합합니다.

---

3. MVC vs MVVM 비교

구분	MVC	MVVM
주요 구성 요소	Model, View, Controller	Model, View, ViewModel
View와 중개자	Controller가 중개 역할	ViewModel이 중개 역할
데이터 바인딩	기본적으로 없음	데이터 바인딩으로 View와 ViewModel 자동 연결
결합도	View와 Controller 간 결합도가 높음	View와 ViewModel 간 결합도가 낮음
적합한 상황	간단한 구조, 작은 애플리케이션에 적합	대규모 애플리케이션, 복잡한 UI 상태 관리에 적합

---

4. 쉽게 이해하는 비유

1. MVC
   • 레스토랑에서 웨이터(Controller)가 손님(View)과 주방(Model) 사이에서 주문과 음식을 전달하는 모습입니다.
     • 손님 → 웨이터 → 주방 → 웨이터 → 손님.
   • 손님(사용자)은 직접 주방(데이터)과 상호작용하지 않습니다.
2. MVVM
   • 손님(View)이 키오스크(ViewModel)를 통해 주문을 입력하고, 키오스크가 주방(Model)과 직접 통신하여 주문과 음식 상태를 자동으로 갱신하는 모습입니다.
     • 손님 → 키오스크 → 주방 → 키오스크 → 손님.
   • 키오스크(ViewModel)는 주문과 결과를 관리하며, 화면(View)을 자동으로 갱신합니다.