MVC & MVVM패턴?
MVC(Model-view-Controlelr)패턴과 MVVM(Model-view-viewModel)패턴은 소프트웨어 개발에서 UI를 만들 때 사용되는 디자인 패턴입니다.
두 패턴은 UI와 데이터 처리를 분리하여 코드의 재사용성을 높이고 유지보수를 용이하게 하는 장점이 있습니다.
MVC패턴
- 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 자주 사용되는 디자인 패턴입니다.
- 비즈니스 로직과 화면을 명확히 분리하는 것을 목표로 합니다.
- 전통적인 서버 기반 웹 애플리케이션에서 사용됩니다. → Spring, Django등
- 서버가 주요 역할을 담당하며 요청과 응답을 관리합니다.
Model
데이터 가공을 책임지는 역할
- 어플리케이션의 정보, 데이터를 나타냄 - Entity
- 비즈니스 로직을 처리한 후 모델의 변경 사항을 컨트롤러와 뷰에 전달
View
사용자에게 보여지는 부분 UI
- 여러개의 뷰가존재하며 데이터를 전달 받음
- 데이터를 화면에 표시하여 사용자에게 나타내는 역할
- 모델에게 전달받은 데이터를 별도로 저장하지 않아야함
Controller
모델과 뷰를 이어주는 다리역할
- 변경사항을 외부에게 알리고 수신하는 방법
- 변경내용을 모델과 뷰에 전달하며 각 구성요소를 관리
- 이벤트 처리 로직이며 뷰를 모니터링해야함.
장단점
장점
- 단순하고 직관적이며 개발 속도 가속화 가능
- 기능 별로 코드를 분리하여 가독성과 코드 재사용성 증가
- 결합도가 낮음
- 유지보수가 용이하며 결합도가 낮아 시스템 변경이 쉽다.
단점
- 어플리케이션이 커질수록 복잡해지며, 유지보수가 어려움
대규모 프로젝트의 경우 다수의 View / Model이 컨트롤러를 통해 연결되기 때문에 Cotroller가 불필요하게 커지는 현상이 발생함.
MVVM 패턴
- Model, View, ViewModel 구성으로 분류하여 설계
- MVC와 유사하지만 Controller대신 ViewModel를 사용
- React, Vue와 가은 프론트엔드 프레임워크에서 사용됩니다.
- 데이터 바인딩과 상태관리 라이브러리를 통해 view와 Model을 분리합니다.
💡ViewModel?
view만을 위한 Model객체
Model로부터의 처리결과를 View에 통지하고 View의 요청에 따라 로직을 실행함.
ViewModel의 특징은 Data Binding과 캡슐화된 Command패턴>을 이용하여 결합도를 없애면서 중간관리자 역할을 수행한다.
- Data binding : 객체간 의존성을 부여하여 view와 Model객체를 연결하는 기능 지원
- Command패턴 : 여러 객체에서 발생하는 일들을 Command 캡슐화를 통해 일괄적으로 처리하는 패턴
동작 방식
- 사용자가 View를 통해 요청을 보냄.
- ViewModel이 요청을 처리하고 Model에 전달.
- Model에서 결과를 처리하여 ViewModel로 전달.
- ViewModel은 결과를 View에 전달하여 사용자에게 표시.
장단점
장점
- View와 Model의 독립성 유지
- 효율적인 단위테스트 진행가능
단점
- 설계의 어려움이 있음
MVC 와 MVVM패턴의 차이점
두 디자인패턴의 차이점으로는 Controller의 역할로 구분된다.
- MVC Controller
- 사용자의 이벤트에 따라 모델 객체를 변화
- 사용자의 이벤트에 따라 뷰를 변화
- MVVM Controller
- 사용자의 이벤트에 따라 뷰를 변화
| 구분 | MVC | MVVM |
|---|---|---|
| 진입점 | Controller | View |
| 관계 | Controller ↔ 여러 View | View ↔ 여러 ViewModel |
| 데이터 바인딩 | 수동 데이터 전달 | 자동 데이터 바인딩 지원 |
| 단위테스트 | Model을 별도로 테스트 가능 | ViewModel을 별도로 테스트 가능 |
Reference
https://junhyunny.github.io/information/design-pattern/mvc-pattern/
말하는 감자