MVP 패턴 이해하기: 개념, 활용 사례, MVC와의 차이점

MVC 패턴은 뷰가 모델을 실시간으로 구독하여 변경사항을 반영하는 것이었습니다.

이러한 패턴에서는 뷰와 모델이 서로 깊은 관계를 갖게 되어, 컨트롤러가 있다 하더라도 완전한 분리가 어렵습니다.

MVP 패턴은 뷰와 모델이 서로의 존재를 아예 모른다는 전제로 구현된 패턴입니다.

지금부터 MVP 패턴의 특징과 MVC 패턴과의 차이점을 살펴보겠습니다.

1. MVP 디자인 패턴이란?

MVP(Model-View-Presenter)는 애플리케이션의 로직, UI, 데이터를 분리하여 유지보수 테스트 용이성을 높이는 디자인 패턴입니다. 각 구성요소는 다음과 같습니다.

• Model: 데이터와 비즈니스 로직을 관리합니다.
• View: UI를 표시하고 사용자 입력을 Presenter에 전달합니다.
• Presenter: View와 Model 사이의 중재자 역할로, View의 요청을 처리하고 Model의 데이터를 가공해 View에 전달합니다.

핵심 특징:

• View는 Model을 직접 참조하지 않습니다.
• Presenter가 View와 Model의 의존성을 분리합니다.
• View 인터페이스를 통해 Presenter와의 결합도를 낮춥니다.

---

2. 활용 사례 (JavaScript)

간단한 Todo 리스트 애플리케이션으로 구현해 보겠습니다.

① Model

class TodoModel {
  constructor() {
    this.todos = [];
  }

  addTodo(todo) {
    this.todos.push(todo);
  }

  getTodos() {
    return this.todos;
  }
}

② View

class TodoView {
  constructor() {
    this.todoList = document.getElementById("todo-list");
    this.addButton = document.getElementById("add-todo");
    this.todoInput = document.getElementById("todo-input");
  }

  bindAddTodo(handler) {
    this.addButton.addEventListener("click", () => {
      const todoText = this.todoInput.value;
      handler(todoText);
      this.todoInput.value = "";
    });
  }

  displayTodos(todos) {
    this.todoList.innerHTML = todos
      .map(todo => `<li>${todo}</li>`)
      .join("");
  }
}

③ Presenter

class TodoPresenter {
  constructor(model, view) {
    this.model = model;
    this.view = view;

    this.view.bindAddTodo(this.handleAddTodo.bind(this));
  }

  handleAddTodo(todoText) {
    this.model.addTodo(todoText);
    this.view.displayTodos(this.model.getTodos());
  }
}

실행 코드

const model = new TodoModel();
const view = new TodoView();
const presenter = new TodoPresenter(model, view);

---

3. MVC와의 차이점

구분	MVP	MVC
View 역할	Presenter와 직접 통신	Controller와 Model을 모두 참조
의존성	View ↔ Presenter (양방향)	View → Controller (단방향)
데이터 흐름	Presenter가 Model ↔ View 중재	Controller가 Model과 View 조정
테스트	View 인터페이스로 테스트 용이	View와 Model의 결합으로 복잡성 증가

정리:

• MVC에서는 View가 Model의 변경을 직접 감시하지만,
• MVP에서는 Presenter가 Model의 데이터 변경을 감지하고 View를 업데이트합니다.

---

4. 결론

✅ MVP 패턴의 장점

• 관심사 분리: UI 로직과 비즈니스 로직이 명확히 구분됩니다.
• 테스트 용이: Mock View를 사용해 Presenter 로직을 쉽게 테스트할 수 있습니다.
• 유지보수성: View 변경이 Model에 영향을 주지 않습니다.

⚠️ 단점

• Presenter가 과도하게 복잡해질 수 있습니다.
• 작은 프로젝트에서는 오버헤드가 발생할 수 있습니다.

MVP 패턴을 쓰기에 적합한 상황:

• 복잡한 UI 로직이 필요한 애플리케이션
• 테스트 주도 개발(TDD)이 필요한 프로젝트

MVP는 MVC의 한계를 보완한 패턴으로, 프론트엔드 개발에서 여전히 흥미로운 역할을 하고 있습니다. 다양한 디자인패턴과 비교해서 학습해 보세요