MVC, MVVM 패턴

예를 들어, 화면에서 버튼 클릭시 서버에 데이터를 요청하고, 해당 데이터를 가져와서 화면에 출력하는 로직이
한 개의 클래스에 작성되어 있다고 생각해보자.

만약 프로그램이 딱 그 정도 작업만 한다면 크게 문제되지는 않을 것이다.
하지만 버튼이 여러개 있고, 화면도 여러개, 데이터도 여러개...인데 한 개의 클래스에서 모든 로직을 관리하게 된다면
결국 코드가 뒤죽박죽 엉켜있고, 지저분해지고 뭐가 뭔지 알아볼 수도 없고 유지보수하기 굉장히 까다로울 것이다.

 

때문에 화면에 출력하는거(사용자 인터페이스) 따로 실제 작업을 처리하는거(비즈니스 로직) 따로 나누면, 유지보수할 때 보기도 쉽고, 찾기도 쉬울 것이다.

그래서 나온 것이 MVC, MVVM과 같은 디자인 패턴(프레임워크 패턴)이다.

 

MVC (Model, View, Controller)

- MVC 패턴은 이름에서 알 수 있듯이 Model, View, Controller로 구성되어 있다.

• Model
  - 프로그램에서 사용되는 데이터 및 데이터 조작 로직을 처리하는 부분을 뜻한다.
• View
  - 사용자에게 보여지는 화면(UI)를 뜻한다.
• Controller
  - 사용자의 입력을 토대로 모델에 명령을 보내는 역할을 한다.
    즉, 사용자는 Controller를 사용하여 모델의 상태를 수정한다.

- 동작 방식은 아래와 같다.

  1) 사용자가 입력한 내용을 Controller에서 전달받는다.

  2) Controller는 전달받은 내용에 대해서 Model에 상태 수정 명령을 전달한다.

  3) Model은 수정한 데이터를 보여줄 View를 선택해서 화면에 출력한다.

 

MVVM (Model, View, ViewModel)

• Model
  - MVC 패턴의 Model과 동일하다.
• View
  - MVC 패턴의 View와 동일하다.
• ViewModel
  - View를 표현하기 위해 만들어진 View를 위한 Model

- MVVM은 두가지 디자인 패턴(Command, Data Binding)을 사용한다

- View에서 입력이 들어오면 Command 패턴을 통해 ViewModel에 명령을 내리게 되고 Data Binding으로 인해 ViewModel의 값이 변화하면 바로 View의 정보가 바뀌게 된다.

1) View에 입력이 들어오면 Command 패턴을 통해 ViewModel로 명령

2) ViewModel은 필요한 데이터를 Model에 요청

3) Model은 ViewModel에 필요한 데이터를 응답

4) ViewModel은 응답받은 데이터를 가공

5) View는 ViewModel과의 Data Binding으로 인해 자동 갱신