[React] MVC vs MVVM : 한눈에 비교하기

 

요즘 개발자 채용공고 우대사항을 보면, 'MVC, MVVM에 대한 이해'를 요구하고는 한다.

그럼 어떡해? 공부해야지~!!

---

MVC, MVVM 아키텍처란?

 

소프트웨어 아키텍처는 코드를 체계적으로 구조화하는 방식이다.

MVC(Model-View-Controller)와 MVVM(Model-View-ViewModel)은,

프론트엔드에서 UI와 데이터 처리를 분리하기 위한 구조.

 

1. MVC (Model-View-Controller)

 

• Model (모델): 데이터 및 비즈니스 로직 (예: API, DB 데이터)

• View (뷰): 사용자에게 보여지는 UI (예: HTML, 화면)

• Controller (컨트롤러): Model과 View를 연결하여 흐름을 제어 (예: 이벤트 처리)

 

✅ 특징:

• 프론트엔드보다는 백엔드(Spring, Django 등)에서 많이 사용

• 컨트롤러가 중심이 되어 Model과 View를 연결하는 역할

 

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

class View {
  render(data) {
    console.log("View: ", 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();

 

 

2. MVVM (Model-View-ViewModel)

 

• Model (모델): 데이터 및 비즈니스 로직

• View (뷰): 사용자 UI (HTML, 화면)

• ViewModel (뷰모델): View와 Model 사이에서 데이터를 변환 및 관리 (React의 상태관리 역할)

 

✅ 특징:

• React, Vue.js 같은 프레임워크에서 많이 사용

• ViewModel이 상태 관리 및 UI 업데이트를 담당 → 데이터 바인딩이 쉬움

 

import { useState } from "react";

function ViewModel() {
  const [message, setMessage] = useState("Hello, MVVM!");

  return (
    <div>
      <p>{message}</p>
      <button onClick={() => setMessage("MVVM 구조 업데이트!")}>클릭</button>
    </div>
  );
}

 

mvc와 mvvm의 차이점

 

 

뭔가 복잡하고 어렵다.. 비유를 통해서 더 쉽게 이해해보자.

---

🍕 피자가게로 비유하면?

 

1. MVC (Model-View-Controller)

➡️ 주문을 받는 직원(Controller)이 주방(Model)과 손님(View) 사이를 조율함

 

📌 특징

- 손님(View)은 직접 주방(Model)과 소통할 수 없음

- 직원(Controller)이 모든 요청을 관리하고 조율해야 함

 

 

2. MVVM (Model-View-ViewModel)

➡️ 손님(View)이 키오스크(ViewModel)를 통해 직접 주문하고, 주방(Model)이 알아서 요리

 

📌 특징

• 키오스크(ViewModel)가 주문을 자동으로 주방(Model)과 연결하고, 자동으로 손님에게 주문 상태 업데이트

• 직원(Controller) 없이 데이터와 UI가 동기화됨 (Model - View Data Binding)

 

---

정리하자면 아래와 같다.

 

- MVC: Controller가 수작업으로 View와 Model을 연결해야 함

- MVVM: ViewModel이 알아서 View와 Model을 자동으로 연결해줌 (React의 상태관리처럼!)

 

당연하게도 최근에는 React나 Vue를 많이 쓰니 MVVM이 요즘 대세인듯 ㅎ.ㅎ