MVC / MVVM 패턴

MVC란?

 

 

정의

Model + View + Controller를 합친 용어 

1. Model은 데이터와 관련된 부분

2. View는 사용자에게 보여지는 UI 부분

3. Controller는 Model과 View를 이어주는 부분

- 가장 보편적으로 사용되는 패턴이다.

 

동작방식

1. 사용자의 액션이 Controller로 들어오면 Controller가 액션을 확인하고 Model을 업데이트 함.

2. 이후 Controller는 Model을 보여줄 View를 선택하고 View는 Model을 이용하여 업데이트를 하고 

화면에 보여줌.

3.Controller는 여러개의 View를 선택할 수 있는 1:n 구조이지만 View를 선택할 뿐 직접적인 업데이트는

진행하지 않음

 

규칙

1. Model은 Controller와 View에 의존하지 않아야 한다.

( Model 내부에 Controller와 View에 관련된 코드가 있으면 안된다.) = ( 데이터에 관련된 코드만 있어야 한다.)

2. View는 Model에만 의존해야 하고 Controller에는 의존하면 안된다.

( View 내부에 Model의 코드만 있을 수 있고, Controller의 코드가 있으면 안된다.)

3. View가 Model로부터 데이터를 받을 때는, 사용자마다 다르게 보여주어야 하는 데이터에 대해서만

받아야 한다.

ex) 배달어플에서 주문하기 버튼은 UI, 주소는 각 사용자마다 다른 Model로부터 받은 데이터

이 둘을 합쳐 View 탄생

4. Controller는 Model과 View에 의존해도 된다.

( Controller 내부에는 Model과 View의 코드가 있을 수 있다.)

5. View가 Model로부터 데이터를 받을 때, 반드시 Controller에서 받아야 한다.

 

장점

비즈니스 로직과 UI 로직을 분리하여 유지보수를 독립적으로 수행 가능

Model과 View가 다른 컴포넌트들에 종속되지 않아 어플리케이션의 확장성,유연성에 유리함

중복 코딩의 문제점 제거

 

단점

View와 Model 사이의 의존성이 높아, 규모가 커질수록 둘 사이의 연결성이 복잡해지고, 따라서 유지보수가 어려워짐.

 

MVVM 패턴

 

 

정의

Model + View + ViewModel을 합친 용어

1. Model은 데이터 및 데이터를 처리하는 부분

2. View는 사용자에게 보여지는 UI 부분

3. ViewModel은 View를 표현하는 모델이자 뷰를 표현하기 위한 데이터를 처리하는 부분

 

동작방식

1.사용자의 액션이 View로 들어오면 ViewModel에 액션을 전달함

2. 이후 ViewModel은 Model에게 데이터를 요청하고 Model은 요청받은 데이터를 ViewModel에게 응답함

3. ViewModel은 받은 데이터를 가공하여 저장함

4. View는 ViewModel과 데이터 바인딩을 하여 화면을 그림

 

장점

View와 Model 사이의 의존성을 없애며, 각 부분이 독립적임

 

단점

뷰 모델의 설계가 쉽지 않다는 점

 

- 예시로는 리액트에서 데이터와 화면 컴포넌트를 분리하는 것을 들 수 있다.