MVC & MVP & MVVM 패턴 삼형제에 대해

MVC 패턴

모델(Model), 뷰(View), 컨트롤러(Controller)로 이루어진 디자인 패턴이고, 애플리케이션의 구성 요소를 세 가지 역할로 나눠서 각 구성 요소에만 집중할 수 있게 해줌.

특징

• 장점: 재사용성과 확장성이 용이함.
• 단점: 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해질 수 있음.

구성 요소

Model

• 데이터베이스, 상수, 변수 등 데이터를 관리하는 요소임.
• 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델이 생성되거나 갱신됨.

View

• 사용자 인터페이스 요소로, 사용자가 볼 수 있는 화면을 담당함.
• 모델의 정보를 따로 저장하지 않고, 화면 표시와 관련된 정보만 가짐.
• 변경 사항이 생기면 컨트롤러에 이를 전달함.

Controller

• 모델과 뷰를 연결하는 다리 역할을 하며, 메인 로직을 담당함.
• 모델과 뷰의 생명주기를 관리하고, 변경 통지를 해석해서 필요한 내용을 구성 요소에 전달함.

MVC 패턴의 예: 스프링 프레임워크

• 스프링의 웹 MVC는 웹 서비스 구축에 유용한 다양한 기능을 제공함.
• @RequestParam, @RequestHeader, @PathVariable 같은 애너테이션으로 사용자의 요청 데이터를 쉽게 분석할 수 있음.
• 장점: 재사용 가능한 코드 작성, 테스트 용이성, 리디렉션 기능의 편리함 등이 있음.

---

MVP 패턴

MVC 패턴에서 Controller가 Presenter로 바뀐 형태의 디자인 패턴임.

특징

• 뷰와 프레젠터가 일대일 관계를 형성해서, MVC 패턴보다 강한 결합을 가짐.

---

MVVM 패턴

MVC에서 Controller가 ViewModel로 대체된 패턴으로, 데이터 바인딩과 커맨드가 특징임.

특징

• 뷰모델(ViewModel)은 뷰를 더 추상화한 계층임.
• 데이터 바인딩: 화면에 보이는 데이터와 메모리 데이터를 동기화해서, 뷰모델이 변경되면 뷰도 자동으로 변경됨.
• 장점:
  • UI를 코드 수정 없이 재사용 가능함.
  • 단위 테스트가 쉬움.
  • 양방향 데이터 바인딩 지원함.

MVVM 패턴의 예: Vue.js

• Vue.js는 반응형(reactivity)이 특징인 프론트엔드 프레임워크임.
• 값 대입만으로도 변수가 변경되고, 양방향 데이터 바인딩과 HTML 기반 컴포넌트 구축을 지원함.
• 재사용 가능한 컴포넌트 기반으로 UI를 효율적으로 개발할 수 있음.