[디자인 패턴] MVC 패턴

MVC 패턴이란?

• Model, View, Controller로 구성된 디자인 패턴
• 어플리케이션의 구성요소를 세가지 역할로 구분하여 개발 프로세스에서 각각의 구성 요소에 집중해 개발 가능하다.
• 장점: 재사용성, 확장성이 용이하다.
• 단점: 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해진다.

모델

• 애플리케이션의 데이터인 **데이터베이스, 상수, 변수**를 의미
  • ex. 사각형 모양의 박스안에 글자가 있다면 그 사각형 모양의 **박스 위치 정보, 글자 내용, 글자 위치, 글자 포맷** 등에 대한 정보를 모두 가지고 있어야한다.
• 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신한다.

뷰

• inputbox, checkbox, textarea 등 사용자 인터페이스 요소를 나타낸다.(모델을 기반으로 사용자가 볼 수 있는 화면 요소를 의미한다.)
• 모델이 가지고 있는 정보를 따로 저장하지 않아야 하며 단순히 사각형 모양 등 화면에 표시하는 정보만 가지고 있어야한다.
• 변경이 일어나면 컨트롤러에 이를 전달해야한다.

컨트롤러

• 하나 이상의 모델, 뷰를 잇는 다리 역할을 한다.
• 이벤트 등 메인 로직을 담당한다.
• 모델과 뷰의 생명주기를 관리한다.
• 모델이나 뷰의 변화를 통지 받으면 이를 해석하여 각각의 구성요소에 해당 내용을 알려준다.

구현 코드

// Model
class TodoListModel {
  constructor() {
    this.todos = [];
  }

  addTodo(todoText) {
    this.todos.push({ id: Date.now(), text: todoText, completed: false });
  }

  toggleTodoCompletion(todoId) {
    this.todos = this.todos.map(todo =>
      todo.id === todoId ? { ...todo, completed: !todo.completed } : todo
    );
  }

  deleteTodo(todoId) {
    this.todos = this.todos.filter(todo => todo.id !== todoId);
  }
}

// View
class TodoListView {
  constructor() {
    this.todoList = document.getElementById('todo-list');
  }

  render(todos) {
    this.todoList.innerHTML = '';
    todos.forEach(todo => {
      const todoItem = document.createElement('li');
      todoItem.textContent = todo.text;
      todoItem.style.textDecoration = todo.completed ? 'line-through' : 'none';
      todoItem.addEventListener('click', () => controller.toggleTodoCompletion(todo.id));
      this.todoList.appendChild(todoItem);
    });
  }
}

// Controller
class TodoListController {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }

  addTodo(todoText) {
    this.model.addTodo(todoText);
    this.view.render(this.model.todos);
  }

  toggleTodoCompletion(todoId) {
    this.model.toggleTodoCompletion(todoId);
    this.view.render(this.model.todos);
  }

  deleteTodo(todoId) {
    this.model.deleteTodo(todoId);
    this.view.render(this.model.todos);
  }
}

// Initialize
const model = new TodoListModel();
const view = new TodoListView();
const controller = new TodoListController(model, view);
view.render(model.todos); // Initial render

// Example usage
controller.addTodo('Buy groceries');
controller.addTodo('Do laundry');
controller.toggleTodoCompletion(model.todos[0].id);
controller.deleteTodo(model.todos[1].id);

MVC 패턴의 예 - 리액트 → 스프링

저자님께서 토론을 통해 정정하심…(링크)

초기 페이스북 PHP → MVC 패턴으로 인한 문제 발생 → FLUX 패턴을 적용한 React가 탄생한 계기