[디자인 패턴] MVC, MVP, MVVM 패턴

MVC 패턴

: 모델(Model), 뷰(view), 컨트롤러(Controller)로 이루어진 디자인 패턴

→ 애플리케이션의 구성 요소를 세 가지 역할로 구분하여 개발 프로세스에서 각각의 구성 요소에만 집중해서 개발할 수 있음

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

 

모델

: 애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 뜻함

💡 ex) 사각형 모양의 박스 안에 글자가 들어 있다면 그 사각형 모양의 박스 위치 정보, 글자 내용, 글자 위치, 글자 포맷에 관한 정보를 모두 가지고 있어야 함.

→ 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신함

 

뷰

: 모델을 기반으로 사용자가 볼 수 있는 화면(UI)을 뜻함

→ inputbox, checkbox, textarea 등 사용자 인터페이스 요소를 나타냄

• 모델이 가지고 있는 정보를 따로 저장하지 않아야함
• 단순히 사각형 모양 등 화면에 표시하는 정보만 가지고 있어야 함
  • 객체를 전달받아 상태를 바로 출력하는 역할만 담당
• 변경이 일어나면 컨트롤러에 이를 전달해야 함
  • 입출력의 순서나 데이터 양식은 컨트롤러에 종속되어 결정됨

 

컨트롤러

: 하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할과 이벤트 등 메인 로직을 담당함

역할

• 모델과 뷰의 생명주기를 관리
• 모델이나 뷰의 변경 통지를 받으면 이를 해석하여 각각의 구성 요소에 해당 내용에 대해 알려줌

 

Spring 에서의 MVC 패턴

: MVC 패턴을 이용한 대표적인 프레임워크로는 Spring이 있음

 

Spring - web MVC

: 웹 서비스를 구축하는데 편리한 기능들을 많이 제공함

💡 ex) `@RequestParam`, `@RequestHeader`, `@PathVariable` 등의 애너테이션을 기반으로 사용자의 요창 값들을 쉽게 분석할 수 있음

• 사용자의 어떠한 요청이 유효한 요청인지를 쉽게 거를 수 있음
  • ex) 숫자를 입력해야 하는데 문자를 입력하는 사례
• 장점: 코드 재사용이 가능, 테스트 가능, 쉽게 리디렉션할 수 있음

 

Spring 에서의 MVC 흐름도

흐름 정리

DispatcherServlet

• web.xml에 정의되어 있으며, sevlet-context.xml 설정 파일을 읽어 구동한다.
• Front Controller라고도 한다.
• 클라이언트의 모든 Request를 받아 제어한다.
• Controller에 요청을 전달하고 결과값을 View에 전달한다.

HandlerMapping

• 요청 URL에 매핑되는 Controller를 찾아 DispatcherServlet에 반환한다.

HandlerAdapter

• HandlerMapping을 통해 받은 Controller에 맞는 메서드를 탐색한다.

Controller

• 클라이언트의 요청을 처리한 후, 비지니스 로직과 서비스를 처리하여 View에 전달할 객체를 Model에 저장한다.

View Name

• Controller의 처리 후, View에 해당하는 View Name을 저장하여 반환한다.

Model

• Controller에서 처리 후, View에 전달할 객체를 저장하는 곳.

View Resolver

• Controller가 반환한 View Name을 기반으로 맞는 View를 찾아 DispatcherServlet에 반환한다.

View

• DispatcherServlet이 전달한 View를 호출하고, Model객체에서 필요한 객체를 가져와 클라이언트에 응답한다.

요약

웹브라우저 -> 컨트롤러로 요청 -> 모델로 구체화 작업 -> JavaBean역할로 자원을 사용하고 받음 -> 뷰는 컨트롤러와 모델에서 서로 주고받음 -> 뷰가 웹브라우저에 응답

• 모델, 뷰, 컨트롤러로 로직이 확실하게 분리됨
  • 유지보수가 쉬워짐

---

MVP 패턴

: MVC 패턴으로부터 파생됨

• MVC에서 C에 해당하는 컨트롤러가 프레젠터로 교체된 패턴

 

💡 뷰와 프레젠터는 일대일 관계이기 때문에 MVC 패턴보다 더 강한 결합을 지닌 패턴으로 볼 수 있음

---

MVVM 패턴

: MVC 패턴으로부터 파생됨

• MVC에서 C에 해당하는 컨트롤러가 뷰 모델로 교체된 패턴

 

• 뷰모델 : 뷰를 더 추상화한 계층
  • MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지는 것이 특징
    • 커맨드: 여러 가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법
    • 데이터 바인딩: 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법, 뷰모델 변경 시 뷰가 변경됨
• 장점
  • 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원
  • UI를 별도의 코드 수정 없이 재사용이 가능
  • 단위 테스팅하기가 쉬움

 

대표적인 프레임워크: 뷰(Vue.js)

→ 반응형이 특징인 프론트엔드 프레임워크