디자인 패턴: MVC, MVP, MVVM

어디선가 누가 멘션하는 걸 들어본 적이 있는 것만 같은 MVC, MVP... 모두 디자인 패턴이라는 프로그래밍을 작성하는 방식에 해당하는 것들이다. 초기에 프로그래밍을 배우기 시작했을 땐 하나도 와닿지 않았는데, 시간이 지나니 이런 디자인 패턴을 적용했을 때와 적용하지 않았을 때의 차이점이 보이기 시작하는 것 같다.

 

MVC 패턴

Model-View-Controller로 이루어진 MVC 패턴은 비즈니스 로직과 UI를 분리하여 유지보수성과 재사용성을 높인다.

• Model: 데이터 및 비즈니스 로직 관리ㅡ서버에서 데이터를 가져오고 가공하는 역할
• View: 사용자에게 보이는 UI 담당ㅡ사용자가 상호작용할 수 있음
• Controller: Model과 View의 중재자ㅡ사용자 입력 처리 및 Model의 데이터를 View에 전달

이 패턴에서는 모델이 데이터를 갖고 있고, 이 데이터를 렌더링하는게 뷰다. 컨트롤러는 모델의 데이터를 뷰가 렌더링하도록 지시한다.

 

하이레벨에서 봤을 때 MVC 패턴의 코드는 이렇게 구성할 수 있다:

// 모델
class Model {
  constructor() {
    this.data = "Hello, MVC!";
  }
}

// 뷰
class View {
  render(data) {
    console.log(data);
  }
}

// 컨트롤러
class Controller {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }

  updateView() {
    this.view.render(this.model.data);
  }
}

const model = new Model();
const view = new View();
const controller = new Controller(model, view); // 모델과 뷰를 주입시킨다

controller.updateView(); // 뷰를 업데이트하는 것은 컨트롤러가 제어한다

 

MVP 패턴

MVC 패턴이랑 비슷하지만 컨트롤러가 프레젠터로 교체됐다. 프레젠터는 컨트롤러만큼 뷰와 강하게 결합돼있진 않지만, 뷰가 프레젠터를 참조하고 있어서 사용자 상호작용을 직접적으로 프레젠터에 알릴 수 있다.

• Model: 데이터 및 비즈니스 로직 관리 (MVC와 동일)
• View: UI 담당ㅡ사용자의 상호작용을 Presenter에게 전달
• Presenter: View와 Model 간의 상호작용 담당ㅡ비즈니스 로직 처리 후 View에 데이터 전달

// 모델
class Model {
  constructor() {
    this.data = "Hello, MVP!";
  }

  getData() {
    return this.data;
  }
}

// 뷰
class View {
  constructor() {
    this.presenter = null;
  }
  
  setPresenter(presenter) {
    this.presenter = presenter;
  }

  display(data) {
    console.log(data);
  }

  onButtonClick() {
    this.presenter.onButtonClick();
  }
}

// 프레젠터
class Presenter {
  constructor(model, view) {
    this.model = model;
    this.view = view;
    this.view.setPresenter(this);
  }

  onButtonClick() {
    const data = this.model.getData();
    this.view.display(data);
  }
}

const model = new Model();
const view = new View();
const presenter = new Presenter(model, view);

presenter.onButtonClick();

 

MVVM 패턴

MVVM 패턴에서는 뷰모델이라는 새로운 중재자가 등장한다. 양방향으로 데이터가 결속되도록 뷰모델이 데이터와 렌더링 함수를 직접적으로 들고 실행한다.

• Model: 데이터와 비즈니스 로직 관리
• View: UI 담당
• ViewModel: View와 Model의 중재자ㅡView의 상태를 렌더링에 반영 및 Model의 데이터를 View에 바인딩

MVVM의 특징은 이런 양방향 데이터 바인딩을 통해 뷰와 뷰모델 간의 데이터가 즉시 동기화된다는 점이다.