현재 공부중인 학생이므로 이 글이 혹시라도 잘못된 정보가 있더라면,
댓글로 잘못된 부분을 지적해주신다면 수정하겠습니다.
앞으로 잘못된 부분을 잘 지적해주셔서 제가 올바르게 성장이 할수 있게 도와주십시오.
소개
전에 MVC 디자인패턴에 대해서 정리를 했었다.
이번에는 MVVM 이라는 디자인 패턴에 대해서 정리를 해보려고 한다.
MVC 패턴을 모른다면 여기를 클릭하여 보기를 바란다.
MVVM 디자인 패턴이란?
일단 MVVVM 디자인패턴은 대표적으로 Vue.js 에서 많이 사용하는 디자인 패턴이다.
MVVM 패턴은 디자인패턴에 포함된다.
MVVM 패턴의 요소는 아래와 같이 되어 있다.
Model : 모델
View : 뷰
View Model : 뷰 모델
사진 출처해당 패턴을 이해하려면 위의 3가지 요소의 관계를 알아야 한다.
MVC 패턴을 알고 있다면 뷰와, 모델은 알고 있을 것이다.
하지만 MVC 패턴을 알고 있는 유저는 뷰 모델은 생소할것이다.뷰 모델과 모델이 뷰로부터 독립적인 형태를 만들어서, 위에서 말한 UI로부터 비즈니스 로직과 프레젠테이션 로직을 분리하려는 목적을 해결할수 있게 된 것이다.
View의 정의
MVC 패턴의 글을 아직 읽지않았을수도 있어서 한번 더 설명을 하도록 한다.
뷰는 한마디로 페이지이다.
사이트 접속자가 접속했을때에 보이는 레이아웃, UI, 애니메이션 등을 정의 하는 것이다.
따라서 사이트 접속자가 접속했을때의 보이는 화면, 페이지, 등을 전체적으로 담당하는 것이다.
View는 위와 같은것을 담당하므로 비즈니스 로직을 절대로 포함하지 말아야 한다.
Model의 정의
MVC 패턴의 글을 아직 읽지않았을수도 있어서 한번 더 설명을 하도록 한다.
Model은 해당 어플리케이션이 어떤것을 할건지를 정의한다.
내부적인 비즈니스 로직을 처리하기 위한 역할을 할 것이다.처리되는 알고리즘, 처음에서의 상속, CRUD작업등이 예시다.
View Model의 정의
뷰 모델을 들어보지 못했을 수도 있다.
뷰 모델이란 뷰에서 사용할 메서드나 필드를 구현해주며 뷰한태 상태의 변화를 알려주는 역할을 담당하고 처리한다.
뷰 모델에서는 뷰에서 사용할 메서드와 필드가 UI 페이지에서 제공해줄 전체적인 기능을 정의한다, 뷰는 이 기능을 어떤식으로 보여줄지를 최종적으로 결정을 한다.일반적으로 뷰 모델과 모델은 일대다 관계를 형성한다. 뷰 모델은 뷰가 쉽게 기능을 사용할 수 있도록 모델에 있는 데이터를 가공해서 뷰에게 기능을 제공한다.
뷰 모델에서 두 모델의 데이터를 가공하고 뷰에서는 오직 UI만 다루도록 해야 한다.
MVVM 디자인 패턴을 사용해야 하는 이유
MVC 패턴의 사용이유가 비슷하다.
MVVM 패턴을 사용하면 유지보수, 확장성, 유연성 이 증가한다.
또한 중복으로 코딩을 해야하는 문제점도 사라질 것이다.
MVVM 패턴의 장점
- 뷰 모델이 모델과 뷰 사이의 어댑터로서 변경이 생겼을 때 변경을 최소화할 수 있다.
- 모델과 뷰 모델이 뷰로부터 독립적이다.
- 뷰 모델과 모델을 플랫폼 독립적으로 개발할 수 있다.
- 테스트하기 쉽다.
- 개발 기간 동안 개발자와 디자이너가 동시에 독립적으로(병렬적으로) 작업할 수 있다.
- UI 디자인이 나오지 않았더라도 미리 정의된 모델과 뷰 모델을 먼저 개발할 수 있기 때문에 병렬적인 업무 프로세스가 가능하다.
MVVM 패턴의 단점
- 거대하고 복잡한 앱을 위해서 고안된 디자인 패턴인 만큼, 소형 앱에서 사용하게 되면 오버헤드가 커진다.
- 앱이 너무 거대해지면 앱의 메모리 소모가 데이터 바인딩때문에 커진다.
MVVM 패턴을 사용해야 하는 이유
소형의 프로젝트나 개발을 진행할때에는 디자인 패턴을 사용하지 않아도 그리 문제가 되지 않을 것이다, 하지만 중형에서 대형의 프로젝트를 진행할때에는 더욱 효율적이게 디자인을 만들어야 할 것이다, 따라서 디자인 패턴을 사용하여 더욱 효율적이게 프로그래밍을 해야할 것이다.
정리하며
MVVM 패턴은 상환에 맞게 써아한다.
디자인 패턴은 다양하므로 상황에 맞는 디자인 패턴을 써야 할 것이다.
MVVM의 장점과 단점을 잘 고려해서 사용을 하야한다. 따라서 장점과 단점을 잘 확인하며 써야 할 것이다.
