디자인 패턴 정리 (MVC 패턴, MVVM 패턴)

1. MVC 패턴

MVC 패턴은 M(모델), V(뷰), C(컨트롤러) 로 구성된 디자인 패턴이다.

- 모델: 애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 의미함.

- 뷰: 사용자에게 보이는 화면을 의미. 즉, 모델을 기반으로 사용자에게 뿌려지는 인터페이스라고 생각하면 됨.

- 컨트롤러: 모델과 뷰를 연결짓는 다리 역할을 함. 메인 로직을 관리하며 모델과 뷰의 생명주기 또한 관리함.

 

MVC 패턴의 흐름

1) 컨트롤러가 사용자의 동작을 캐치

2) 캐치한 동작을 기반으로 모델 수정 (데이터 변경)

3) 변경된 데이터를 기반으로 뷰 수정(역시 컨트롤러가 관여)

간단히 말해 사용자가 동작을 입력하면 컨트롤러가 해당 동작을 캐치하여 데이터를 알맞게 변경하고, 변경된 데이터를 뷰를 통해 사용자에게 보여준다.

 

MVC 패턴의 특/장점

1) 재사용성 및 확장성이 용이

2) 애플리케이션의 볼륨이 커질수록 모델과 뷰의 관계가 복잡해짐

3) 모델과 뷰 사이의 의존성이 높음. 따라서 유지보수에 어려움이 있을 수 있음

 

MVC 패턴의 주 사용처

React 라이브러리

 

---

 

2. MVVM 패턴

MVVM 패턴은 MVC 패턴의 컨트롤러가 뷰모델로 바뀐 패턴임.

- 모델: 애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 의미함.

- 뷰: 사용자에게 보이는 화면을 의미. 즉, 모델을 기반으로 사용자에게 뿌려지는 인터페이스라고 생각하면 됨.

- 뷰모델: 뷰와의 데이터바인딩을 기반으로 동작을 제어함. 모델로부터 데이터를 가져와서 가공하며, 가공된 뷰모델의 데이터는 뷰에 적용됨(데이터바인딩 되어있기 때문). 또한 뷰와의 상호작용을 통해 모델을 업데이트 할 수 있음.

 

MVVM 패턴의 흐름

1) 뷰에서 사용자의 동작을 캐치

2) 뷰모델로 동작 전달

3) 뷰모델이 모델로부터 데이터를 전달받음

4) 뷰모델이 전달받은 데이터 가공 후 저장함

5) 뷰에서 뷰모델과의 데이터바인딩을 통해 뷰모델의 데이터를 보여줌

간단히 말해 뷰모델에서 가공한 데이터를 뷰에서 데이터바인딩을 통해 보여준다고 생각하면 된다.

 

MVVM 패턴의 특/장점

1) 데이터 바인딩을 통해 뷰와 뷰모델간의 의존성을 없앴음

2) 뷰모델의 설계가 어려움

 

MVVM 패턴의 주 사용처

Vue.js