[JS] MVC 패턴과 MVVM 패턴

MVC 패턴

(이 패턴은 자바스크립트 고유의 것이 아닙니다.)

MVC는 Model, View, Controller의 약자입니다. 응용 프로그램을 세가지 구성 요소로 나눈 것입니다. 이렇게 나누는 이유는 영역간 코드의 결합도를 최소화 시키기 위해서 입니다.

 

 

위 이미지 처럼 Model, View, Controller가 상호작용을 하며 사용자가 어플리케이션과 상호작용 할 수 있도록 만들어 줍니다.

Model

모델은 데이터베이스에 있는 데이터를 가져와 다른 객체에 전달해 줍니다. 또는 외부 객체로부터 데이터를 받아서 DB에 넣어줍니다.

View

모델에서 받아온 데이터로 화면을 관리합니다. 사용자가 입력한 데이터를 처리하고, 유저가 생성한 입력 이벤트 데이터를 다른 객체에 전달하는 역할을 합니다. (html, css, js로 구성된 화면단을 말합니다.)

Controller

모델과 뷰를 연결시켜주는 역할로, 모델에서 받아온 데이터를 뷰에 전달합니다. 또는 뷰에서 사용자가 입력한 데이터를 모델로 보내줍니다.

 

 

MVVM 패턴

MVVM 모델은 모델, 뷰 그리도 뷰 모델로 이루어진 패턴을 말합니다. 모델과 뷰는 MVC에서 소개했던 것과 같습니다.

 

 

View Model

그렇다면 뷰 모델은 무엇이 다를까요? 뷰 모델은 뷰와 연결할 데이터와 명령으로 구성되어 있어, 데이터 등의 상태가 변경 될 때마다 뷰에게 상태 변화를 전달합니다.