오늘의 CS(디자인 패턴 - MVC 패턴, MVP패턴, MVVM 패턴)

1.  MVC 패턴이란?

Model-View-Controller의 줄임말로, 프로그램을 세 가지 부분, 즉 모델, 뷰, 컨트롤러로 나눠 편리하게 관리한다. 

 

1.1. 모델: 데이터와 관련된 부분을 담당한다. 애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 뜻한다. 예를 들어, 게임에서 캐릭터의 정보나 점수 등을 관리하거나, 쇼핑 사이트에서 상품정보를 관리하는 부분이 모델이다. 

 

1.2. 뷰: 사용자에게 보여지는 화면(인터페이스)를 담당한다. 사용자가 보는 화면을 구성하고, 모델이 가진 데이터를 화면에 표시하는 역할을 한다. 예를 들어, 게임의 그래픽이나, 쇼핑 사이트의 상품 목록 페이지 등이 뷰에 해당한다. 변경이 일어나면 컨트롤러에 이를 전달해야 한다.

 

1.3. 컨트롤러: 사용자의 입력을 받아 처리하는 부분을 담당한다. 사용자가 버튼을 누르거나, 키보드를 누르는 등의 동작을 받아들이고, 그에 따라 모델을 업데이트하거나 뷰를 바꾸는 역할을 한다. 모델과 뷰의 생명주기를 관리한다. 하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할을 하며 이벤트 등 메인 로직을 담당한다. 

 

 

2.  MVP 패턴이란?

Model-View-Presenter은 MVC 패턴과 비슷하게 각 부분이 서로 독립적으로 동작한다. 그런데 컨트롤러가 아니고 프레젠터로 바뀐다.

 

2.3 프레젠터: 뷰와 모델 사이의 다리역할을 한다. 뷰로부터 사용자의 입력을 받아 모델을 업데이트하고, 모델의 데이터를 가져와 뷰를 업데이트 역할을 한다. MVC패턴과 차이점은 프레젠터가 뷰와 모델 사이에서 모든 통신을 관리한다. 이렇게하면 뷰와 모델이 서로 직접 알지 못하게 하므로, 뷰의 변경이 모델에 영향을 미치지 않는다. 이렇게 하면 코드의 재사용성과 테스트 용이성을 높일 수 있다.

 

 

3.  MVVM 패턴이란?

Model-View Model - Model은 MVP에서 P에 해당하는 부분이 뷰모델로 바뀐 모델이다. 

 

3.3 뷰 모델: 뷰와 모델 사이의 번역기 역할을 한다. 뷰 모델은 모델로부터 데이터로 가져와서 뷰가 이해할 수 있는 형태로 바꾼 후 뷰에게 전달한다. 이것을 양방향 데이터 바인딩이라고 한다. 이렇게 하면 별도의 코드 수정 없이 재사용할 수 있고 단위 테스트하기 쉽다는 장점이 있다. MVVM 패턴을 가진 대표적인 프레임워크로는 뷰가 있다. 

 

*양방향 데이터 바인딩: 예를 들어 마법 거울이 있다고 하자. 내 머리 스타일이 바뀌면 거울에 반영되고, 거울 속의 머리 스타일이 바뀌면 내 머리도 바뀐다. 사용자 인터페이스에서 데이터를 변경하면, 그 변경사항이 데이터 모델에 자동으로 반영되고, 데이터 모델에서 변경이 일어나면 그 변경사항이 사용자 인터페이스에서도 자동으로 반영된다. 이렇게 하면, 사용자 인터페이스와 데이터 모델이 항상 동기화되어 있어, 데이터의 일관성을 유지하고 코드의 복잡성을 줄일 수 있다.