MVC 패턴과 Vue.js, React.js의 역할

프론트엔드 개발을 하다 보면 한 번쯤 듣게 되는 ‘MVC 패턴’.
그리고 가장 많이 쓰는 프론트엔드 프레임워크인 Vue.js, React.js.
둘은 어떤 관계가 있을까요?
MVC 패턴이 무엇인지, Vue와 React가 이 구조에서 어떤 역할을 하는지 쉽게 정리해봅니다.

---

MVC 패턴이란?

MVC는 Model-View-Controller의 약자입니다.

• Model: 데이터와 비즈니스 로직을 관리하는 부분
• View: 실제 화면(UI)을 담당
• Controller: 사용자의 입력을 받아서 Model과 View를 연결해 주는 역할

MVC 패턴의 핵심은 **관심사의 분리(Separation of Concerns)**입니다.
역할을 분리해서 유지보수성과 확장성을 높일 수 있습니다.

---

프론트엔드에서의 MVC

초기에는 서버(백엔드)에서 MVC 구조를 전부 처리했습니다.
하지만 SPA(Single Page Application)이 등장하면서 프론트엔드에서 자체적으로 MVC 구조를 가지기도 합니다.

예시로,

• Model: 컴포넌트의 상태(state), 전역 상태관리(Vuex, Redux 등)
• View: React/Vue 컴포넌트의 화면 부분 (template, JSX 등)
• Controller: 컴포넌트의 메서드, 이벤트 핸들러 등

---

Vue.js, React.js의 역할

1. View 중심 프레임워크/라이브러리

Vue.js, React.js 모두 **View(화면)**에 초점을 둔 도구입니다.

• Vue 공식 문서: "Vue는 MVVM 패턴에서 ViewModel 역할에 해당합니다."
• React 공식 문서: "React는 UI 구축을 위한 라이브러리입니다."

즉, Model이나 Controller 역할까지 직접 담당하진 않고, UI와 상태를 효율적으로 연결하는 데 집중합니다.

2. 실제 프로젝트 구조에서는?

• Model: 서버 데이터(API), 상태관리(Vuex, Pinia, Redux 등)
• View: Vue/React 컴포넌트
• Controller: 컴포넌트 메서드, 훅, 라이프사이클 함수 등

즉, Vue, React는 View를 담당하면서 Controller의 일부도 담당합니다.
Model은 보통 상태관리 라이브러리나 API 등 외부에서 처리합니다.

---

예시 코드

Vue.js

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">변경</button>
  </div>
</template>
<script>
export default {
  data() {
    return { message: "안녕하세요" }; // Model
  },
  methods: {
    changeMessage() { // Controller
      this.message = "반가워요!";
    }
  }
}
</script>

React.js

import { useState } from "react";
export default function App() {
  const [message, setMessage] = useState("안녕하세요"); // Model

  function changeMessage() { // Controller
    setMessage("반가워요!");
  }
  return (
    <div>
      <h1>{message}</h1>
      <button onClick={changeMessage}>변경</button>
    </div>
  );
}

위 코드에서

• message: Model
• 화면: View
• changeMessage: Controller 역할을 합니다.

---

결론

정리하자면 Vue.js, React.js는 전통적인 MVC에서 View 역할에 초점을 둔 도구입니다. 하지만 상태 관리와 컴포넌트 기반 구조 등으로 Controller의 일부 기능도 수행하며, Model(상태/데이터)은 별도의 관리 도구와 함께 사용하는 경우가 많습니다.

프론트엔드 설계를 더 잘 이해하고 싶다면, 이런 구조적인 관점에서 Vue, React를 바라보는 것도 큰 도움이 됩니다!