MVC

옵저버, 전략, 컴포지트 패턴으로 이루어진 복합패턴으로, 모델, 뷰, 컨트롤러로 이루어져 있다.

모델-뷰-컨트롤러

모델

• 모델에는 모든 데이터, 상태와 애플리케이션 로직이 들어있다.
• 뷰와 컨트롤러에서 모델의 상태를 조작할 때 필요한 인터페이스를 제공하고, 모델은 뷰와 컨트롤러에게 상태 변화를 알린다.

뷰

• 사용자 인터페이스 요소로, 모델을 기반으로 사용자가 볼 수 있는 화면
• 변경이 일어나면 컨트롤러에 이를 전달해야 한다.

컨트롤러

• 하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할로, 이벤트 등의 메인 로직 담당한다.
• 모델과 뷰의 생명주기를 관리한다.
• 모델이나 뷰의 변경 통지를 받으면 이를 해석하여 각각의 구성요소에게 이를 알려준다.

동작 과정
1. 사용자는 뷰에만 접촉할 수 있다. 뷰는 무슨일이 일어났는지 컨트롤러에게 알려준다.
2. 컨트롤러는 사용자의 행동을 받아서 해석한다.
2-1. 컨트롤러는 모델에게 상태를 변경하라고 요청한다.
2-2. 컨트롤러가 뷰를 변경해달라고 요청한다,
3. 상태가 변경되면 모델이 뷰에게 그 사실을 알린다.
4. 뷰가 모델에게 상태를 요청한다.

사용되는 패턴

전략 패턴

• 뷰는 여러 전략을 써서 설정할 수 있고, 컨트롤러는 이러한 전략을 제공한다.
• 뷰는 사용자의 행동을 처리하는 작업을 컨트롤러에게 맡기는데, 컨트롤러는 뷰의 전략 객체에 해당한다.
• 컨트롤러를 바꾸면 뷰의 행동도 바꿀 수 있다.
• 뷰를 모델로부터 분리할 수 있다.

컴포지트 패턴

• 뷰는 GUI 구성요소로 이루어진 복합객체로서, 최상위 구성 요소에는 다른 구성 요소들이 들어있고, 그 안에는 각각 다른 구성요소가 들어갈 수 있다.
• 컨트롤러가 뷰에게 화면을 갱신해달라고 요청하면 최상위 뷰 구성요소에게만 화면을 갱신하라고 알려주면 된다.

옵저버 패턴

• 모델의 상태가 변화되면 연관된 객체들(뷰, 컨트롤러)에게 알려준다.
• 한 모델에서 서로 다른 여러가지 뷰를 동시에 사용할 수 있다.
• 모델을 뷰와 컨트롤러로부터 분리시킨다.

어댑터 패턴

• 새로운 모델을 기존의 뷰와 컨트롤러에 연결해서 사용할 때는 어댑터 패턴을 활용한다.

적용

React.js

• 유저 인터페이스를 구축하기 위한 라이브러리로, 가상 DOM을 통해 실제 DOM을 조작하는 것을 추상화해서 성능을 높인다.
• 불변성, 단반향 바인딩 등

** 가상 DOM: 가상으로 UI를 메모리에 저장했다가, 실제 DOM과 동기화하는 프로그래밍 개념 또는 UI 객체

MVP 패턴

MVC에서 컨트롤러가 프레젠터로 교체된 패턴

• 뷰와 프레젠터가 일대일 관계이기 때문에 더 강한 결합이다.

MVVM 패턴

MVC에서 컨트롤러가 뷰모델로 바뀐 패턴

• 뷰모델: 뷰를 더 추상화한 객체
• 뷰 ← 데이터 바인딩, 커맨드 → 뷰모델 - 갱신 → 모델
• 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원함 → 뷰모델 변경시 뷰가 변경된다.

커맨드: 여러가지 요소에 대한 처리를 하나의 액션으로 처리
* 데이터 바인딩: 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법

ex) Vue.js: watch와 computed