MVVM패턴이란?

Vue.js는 MVVM패턴을 기반으로 합니다.

MVVM이 무엇인지 알고 Vue.js를 활용하는것이

매우 중요하다고 생각합니다!

---

1. MVVM의 탄생 배경

자바스크립트 프레임워크가 비동기 방식의 프로그래밍을 지원하기 시작하면서

웹에 특정 작업이 수행될 때 웹 페이지 전체를 다시 요청하는 것은 불필요한 작업이 되었습니다.

변화가 필요한 특정 부분만 업데이트 되게해 더 빠르게 반응하게 할 수 있기 때문입니다.

 

MVC 패턴의 경우 모든 요청과 응답 과정에 시간 소모가 크고

반응형 UX를 제공하기 어렵다는 단점이 있습니다.

이를 해결하기 위해 변형된 모델 MVVM이 생긴것 입니다.

 

2. MVVM이란?

MVVM은 "Model + View + View Model"을 합친 용어입니다.

MVC패턴의 변형된 형태라고 생각할 수 있습니다.

MVC패턴과 가장 큰 차이점은 View Model과 Data Binding의 도입입니다.

 

MVVM 패턴 구조

• View:
  사용자에게 보여지는 부분, View Model의 스토어를 기반으로 상태에 따라 렌더링함
  (Data Binding에 메서드를 호출해 노출되어 있는 데이터들과 소통)
  
  
• View Model:
  스토어안에 View에 보여질 데이터 유지, Model에 데이터를 전달하기도 함
  
  
• Model:
  애플리케이션 데이터의 영속적 저장소, 데이터 처리
  
  
• Data Binding:
  View에 데이터를 노출, 데이터에 변화가 생길 때 View에 반영될 수 있도록 함

3. 동작 순서

1. 사용자의 Action들은 View를 통해 들어오게 됩니다.
2. View에 Action이 들어오면, Command 패턴으로 View Model에 Action을 전달합니다.
3. View Model은 Model에게 데이터를 요청합니다.
4. Model은 View Model에게 요청받은 데이터를 응답합니다.
5. View Model은 응답 받은 데이터를 가공하여 저장합니다.
6. View는 View Model과 Data Binding하여 화면을 나타냅니다.

4. 장점

• 코드 중복을 줄일 수 있음
• 반응형 UX 개발에 편리함
• 요청에 대한 응답을 기다리지 않아도 됨
• 모듈화하여 개발 가능
  (Model, View, View Model 각 각의 구조가 독립적)

---

MVC 패턴을 완벽하게 이해한 상태라면

MVVM패턴도 이해하는게 어렵지 않을것 같습니다.

저는 이해하는데 조금 시간이 걸렸네요,,ㅎ

 

Vue.js를 활용해서 작은 프로젝트를 해보고싶은데

뭐가좋을지 고민이네욤ㅇㅅㅇa

다음 포스팅엔 고민을 끝내고 프로젝트를 시작해보겠습니다!