[디자인 패턴]MVC패턴, MVVM패턴

MVC패턴

MVC패턴은 Model + View + Controller의 약자로 각 Model, View, Controller의 역할로 나누어서 개발하는 디자인 패턴이다. 가장 널리 사용되고 있는 패턴이다. 비즈니스 로직과 화면을 분리하여 사용한다. 

MVC 패턴의 각 역할을 보면

 

- Model : 데이터와 비즈니스 로직을 담당

- View : 화면을 담당

- Controller : 사용자의 입력을 받으면 처리(모델과 뷰로 라우팅)를 해준다.

MVC 패턴

 

모델(Model) 

모델은 앱에 표현할 데이터를 정의해준다. 데이터를 요청하거나 상태가 변경되면 뷰에게 알려준다.

DB와의 연결을 해주며 데이터와 직접적으로 연동되는 부분이다.

 

뷰(View)

사용자에게 보여지는 방식을 정의한다. 웹 사이트라고 하면 사용자가 직접적으로 볼 화면 혹은 보여주는 방식을 정의한다.

 

컨트롤러(Controller)

사용자에게서 입력을 받으면 모델 및 뷰에게 응답해주고 업데이트해준다.

예를 들면 뷰에서 사용자가 로그인 버튼을 눌러 로그인을 시도하면 컨트롤러는 모델과 연동하여 로그인을 원하는 사용자의 아이디와 패스워드가 맞는지 모델에 전달해 확인한 뒤 로그인 이후 홈 화면이 보이도록 뷰에게 응답하는 역할도 한다.

 

MVVM 패턴

 

 

MVVM 패턴

MVVM 패턴은 Model + View + ViewModel을 합한 디자인 패턴이다. MVC 패턴과 유사하다.

Model과 View MVC패턴이 하는 동작과 유사하지만 Controller가 빠지고 View를 표현하기 위한 ViewModel이 추가된 구조이다.

 

- Model : 데이터와 비즈니스 로직을 담당한다.

- View : 화면을 담당

- ViewModel : 뷰를 표현하기 위하여 만들어진 모델 뷰와 연결하여 뷰에게서 액션을 받고 뷰를 업데이트해준다.

 

 

MVVM패턴의 동작 방식

1. 뷰에서 사용자의 입력이 들어오면 ViewModel에게 요청

2. ViewModel은 필요한 데이터를 모델에게 요청

3. 모델은 ViewModel에게 데이터를 응답.

4. ViewModel은 응답 데이터를 가공해서 저장

5. 뷰는 ViewModel과의 데이터 바인딩을 통해 자동으로 갱신된다.

 

데이터 바인딩

MVVM에서의 데이터 바인딩은 모델과 UI간의 싱크를 맞춰주는 개념이라고 생각하면된다.
VIEW의 로직이 분리되어있어도 한쪽에서 업데이트가 일어나면 다른쪽에도 업데이트가 일어나 데이터의 일관성을 유지하는것이다.

 

MVVM패턴의 장점

- 뷰와 모델이 서로 알지 못하기 때문에 독립성을 유지할 수 있다.

- 독립성이 유지되기 때문에 효율적인 유닛 테스트가 가능하다.

- 뷰와 뷰 모델의 관계는 N:1의 관계이다.

 

MVVM패턴의 단점

- 데이터 바인딩을 필수적으로 요구한다.

- 프로젝트가 복잡해질수록 ViewModel이 비대해진다..

- 표준화된 틀이 존재하지 않아서 사람마다 구현하는 방식이 제각각 다르다.

 

---

디자인 패턴을 알아보았는데 보통은 MVC패턴으로 많이 구현하다 보니 MVVM패턴이 존재하는지 처음 알았고

뷰 모델이라는 새로운 메커니즘을 알게 되었다.

데이터가 바인딩되다 보니 데이터의 일관성을 유지할 수 있어 변화가 일어날 때 뷰와 연동되어 좋은 것 같지만,

구체적으로 뷰 모델을 설계하려면 설계 자체가 쉽지 않을 것 같다는 생각이 들었다.

좀 더 공부해야지..!

 

 

도움이 된 글

- https://jhtop0419.tistory.com/m/21

- https://beomy.tistory.com/43

- https://developer.mozilla.org/ko/docs/Glossary/MVC