✅ MVC, MVP, MVVM 패턴의 차이와 프론트엔드 적용 사례

프론트엔드 아키텍처 설계 시 자주 언급되는 MVC, MVP, MVVM은 각기 다른 방식으로 UI, 로직, 데이터의 분리를 추구합니다.
면접에서 이들 패턴을 묻는 이유는, 구조적 사고, 협업 효율성, 테스트 용이성 등에 대한 이해를 확인하기 위함입니다.
이번 글에서는 각 패턴의 구조, 차이점, 프론트엔드에서의 활용 예시까지 자세히 정리합니다.

📌 1. MVC (Model-View-Controller)

✅ 구조

사용자 → View → Controller → Model → View

Model: 애플리케이션의 데이터, 상태, 비즈니스 로직
View: 사용자 인터페이스(UI)
Controller: View에서 발생한 이벤트를 처리하고 Model과 View를 연결

✅ 특징

View는 직접 Model을 참조 가능
전통적인 웹 프레임워크(예: Django, Ruby on Rails)에서 자주 사용

✅ 예시 (React Context 없이 구성)

// Controller 역할
const handleSubmit = () => {
  const result = validate(form);
  if (result.ok) saveData(form); // Model
};

// View 역할 (JSX)
return <button onClick={handleSubmit}>Submit</button>;

📌 2. MVP (Model-View-Presenter)

✅ 구조

사용자 → View ↔ Presenter ↔ Model

View: UI만 담당, Presenter에 의존
Presenter: 로직과 Model 업데이트 담당 (양방향)
Model: 데이터 관리

✅ 특징

View는 Passive (Presenter 없이 독립 실행 불가)
테스트가 용이함 (Presenter를 Mock으로 단위 테스트 가능)

✅ 예시 (Vanilla JS 또는 Flutter MVP 구조)

// Presenter
class LoginPresenter {
  constructor(view) {
    this.view = view;
  }

  login(username, password) {
    if (username && password) {
      this.view.showLoading();
      api.login(username, password).then(() => {
        this.view.showSuccess();
      });
    }
  }
}

📌 3. MVVM (Model-View-ViewModel)

✅ 구조

사용자 ↔ View ↔ ViewModel ↔ Model

View: 사용자와의 인터페이스
ViewModel: View의 상태를 관리하고 Model과의 통신 담당
Model: 데이터와 비즈니스 로직

✅ 특징

View ↔ ViewModel 간 양방향 바인딩
React, Vue, Angular에서 흔히 사용됨

📌 4. React에서의 MVVM 구조 해석

View: JSX 컴포넌트
ViewModel: 상태와 이벤트 핸들링 로직 (Custom Hook or Container)
Model: API, 데이터 처리 함수

✅ 예시

// ViewModel (useTodo.ts)
export function useTodo() {
  const [todos, setTodos] = useState([]);
  const fetchTodos = async () => {
    const res = await api.getTodos();
    setTodos(res);
  };

  return { todos, fetchTodos };
}

// View
function TodoPage() {
  const { todos, fetchTodos } = useTodo();
  useEffect(() => { fetchTodos(); }, []);

  return (
    <ul>
      {todos.map(t => <li key={t.id}>{t.title}</li>)}
    </ul>
  );
}

📌 5. MVC vs MVP vs MVVM 비교 요약

항목 MVC MVP MVVM

데이터 흐름	View ↔ Model	View ↔ Presenter ↔ Model	View ↔ ViewModel ↔ Model
View 책임	Controller와 직접 연동	Presenter 의존	ViewModel과 바인딩
테스트 용이성	낮음	높음	높음
대표 사례	Spring MVC, Rails	Android(Java)	React, Vue, Angular

📌 6. 실무 적용 경험

🧪 문제

React 프로젝트에서 상태와 뷰 로직이 섞여 있어 재사용성과 테스트가 어려웠음

✅ 해결

useXXX 형태의 Custom Hook을 ViewModel로 분리
상태와 API 처리 로직을 별도 레이어로 나눔
View 컴포넌트는 최대한 로직 없이 UI만 담당

→ 테스트 코드 작성이 쉬워졌고, 유지보수 시 코드 분리가 명확해짐

📌 면접에서 이렇게 답하세요

MVC, MVP, MVVM은 UI와 로직을 분리하기 위한 구조 설계 방식입니다.
React에서는 MVVM 구조가 자연스럽게 적용되며, View는 컴포넌트, ViewModel은 커스텀 훅이나 컨테이너로 구성하여 로직을 분리합니다.
실무에서는 MVVM 패턴을 기반으로 상태와 UI를 명확히 분리하여 유지보수성과 테스트 효율을 확보했습니다.

MVC,MVP,MVVM,프론트엔드패턴,React설계,커스텀훅,ViewModel,프레임워크구조,컴포넌트설계,프론트엔드면접