👨💻 MVC 패턴
애플리케이션을 모델(Model), 뷰(View), 컨트롤러(Controller)
세 가지 역할로 구분하여 각 구성요소를 따로따로 집중적으로 개발할 수 있게 하는 디자인 패턴이다.예시) ReactJS, AngularJS
Controller는 Model을 통해서 데이터를 가져오고
가져온 데이터를 이용하여 View를 구성하고 사용자에게 전달한다.
🔎 모델(Model)
애플리케이션의 데이터베이스, 상수, 변수 등을 뜻한다.
🔎 뷰(View)
사용자 인터페이스요소(UI)를 나타낸다.
화면에 표시하는 기능만을 한다.
🔎 컨트롤러(Controller)
모델(Model)과 뷰(View)를 N : N 관계로 이어주는 다리 역할을 하며
애플리케이션 이벤트의 메인 로직을 제어한다.
♻️ MVC 순서
- 사용자 -> Controller
- Controller -> Model 업데이트
- Controller -> View 선택
- Model -> View(모델을 이용하여 화면 출력)
🔴 MVC 패턴의 장단점
가장 단순하게 사용가능하지만 View와 Model 사이의 의존성이 높기 때문에 복잡성이 증가할 수 있고, 유지보수에 어려움을 겪을 수 있다.
👨💻 MVP 패턴
애플리케이션을 모델(Model), 뷰(View), 프레젠터(Presenter)
세 가지 역할로 구분하여 뷰와 프레젠터의 1:1 관계로 MVC패턴보다
더 강한 결합을 지닌 디자인 패턴이다.
🔎 프레젠터(Presenter)
View에서 요청한 정보를 Model에서 받아와 다시 View에게 전달하는 연결 통로 역할을 한다.
♻️ MVP 순서
- 사용자 -> View
- View -> Presenter에 데이터 요청
- Presenter -> Model에 데이터 요청
- Model -> Presenter -> View (데이터 응답)
- View가 데이터를 이용하여 화면 출력
🔴 MVP 패턴의 장단점
View와 Model의 의존성을 해결한 패턴이지만, View와 Presenter 사이의 의존성은 해결하지 못했다.
👨💻 MVVM 패턴
애플리케이션을 모델(Model), 뷰(View), 뷰모델(ViewModel)
세 가지 역할로 구분하여 View를 추상화한 View Model을 이용하여
🔎 뷰 모델(View Model)
View들을 처리하기 위한 모델이다.
다수의 View들에 의해 요청 받은 Action들을 커맨드 패턴을 사용하여 전달받고
Model에게 데이터를 받아와 가공 및 저장 후 다시 View와 데이터바인딩을 이용한 화면 출력을 담당한다.
커맨드 패턴과 데이터 바인딩을 사용하여 View와 View Model간의 의존성을 제거했다.
♻️ MVVM 순서
- 사용자 -> View
- View -> View Model(커맨드 패턴으로 전달)
- View Model -> Model 데이터 요청
- Model -> View Model 데이터 응답
- View Model -> 데이터 가공 및 저장
- View - View Model의 데이터바인딩을 통한 화면 출력
🔴 MVVM 패턴의 장단점
커맨드 패턴과 데이터 바인딩을 이용하여 View-View Model간의 의존성을 없앴고, View와 Model 사이의 View Model을 이용하여 의존성을 없앴다. 각각이 독립적으로 모듈화할 수 있다는 장점이 있지만 그만큼 복잡도가 증가한다는 단점도 있다.
