📰 MVC 와 MVVM 알아보기

MVC(Model-View-Controller)와 MVVM(Model-View-ViewModel)은 모두 문제를 분리하는 방식으로 코드를 구성하기 위해 소프트웨어 개발에 사용되는 아키텍처 디자인 패턴

즉, 프로그램 로직을 역할에 따라 여러 구성 요소로 나누는 것

이러한 패턴은 특정 프로그래밍 언어에만 국한되지 않으며 Java, JavaScript, Python, C# 등 다양한 언어로 구현 가능

• MVC (모델-뷰-컨트롤러)

  • 모델

    데이터와 비즈니스 로직을 나타냄
    
    이는 사용자 인터페이스와 독립적이며 
    애플리케이션의 데이터, 로직 및 규칙을 직접 관리

  • 뷰

     UI 구성 요소를 나타냄 
     
     모델의 데이터를 사용자에게 표시하고 
     사용자 명령(예: 버튼 클릭)을 컨트롤러에 보냄

  • 컨트롤러

    모델과 뷰 구성 요소 간의 인터페이스 역할
    
    모든 비즈니스 로직과 들어오는 요청을 처리하고, 
    모델을 사용하여 데이터를 조작하고, 
    뷰와 상호 작용하여 최종 출력을 렌더링

    
    

  • MVC는 뷰가 HTML 또는 UI이고, 컨트롤러가 백엔드 로직이고, 모델이 데이터를 저장하는 데이터베이스인 웹 애플리케이션에서 널리 사용

  • Ruby on Rails, Django(Python), Spring MVC(Java) 및 ASP.NET MVC(C#)와 같은 웹 프레임워크에서 널리 사용

    
    

  • React

    • 모델
      • 애플리케이션의 데이터 및 비즈니스 로직
      • 간단한 JavaScript 개체를 사용 가능
      • 복잡한 상태 관리를 위해 Redux 또는 MobX와 같은 라이브러리를 사용 가능
      • React 구성 요소 외부에서 애플리케이션 상태를 관리하는 데 도움이 되며 효과적
    • 뷰
      • React 컴포넌트는 UI를 렌더링하고 사용자 입력에 반응
      • 구성 요소는 프레젠테이션에 중점을 두고 모델에서 데이터를 수집
    • 컨트롤러
      • 기존 MVC 프레임워크와 같은 전용 '컨트롤러' 레이어가 없음
      • 비즈니스 로직은 종종 React 구성요소 내에 상주 (뷰와 컨트롤러가 혼합되어 있음)
      • 별도의 JavaScript 함수 또는 사용자 정의 후크로 추출
      • 대규모 애플리케이션에서 또는 Redux를 사용하는 경우 액션과 리듀서는 컨트롤러와 유사한 역할을 맡아 비즈니스 로직과 상태 변환을 처리

    많은 경우 React 애플리케이션은 상태 관리를 위해 React의 구성 요소 기반 접근 방식을 Redux(또는 유사한 라이브러리)와 결합하여 React의 장점을 활용하는 동시에 MVC 철학에 부합함으로써 이점을 얻음

• MVVM (모델-뷰-뷰모델)

  • 모델

     MVC와 유사하며 데이터와 비즈니스 로직

  • 뷰

     UI 구성 요소를 나타냄 
     
     MVC와 달리 MVVM의 View는 
     ViewModel의 데이터 바인딩에 더 적극적으로 참여

  • 뷰모델

    모델과 뷰 사이의 중개자 역할
    
    모델과 뷰 간의 데이터 바인딩을 제공하고 
    뷰의 표시 논리 대부분을 처리

    
    

  • MVVM은 Angular, KnockoutJS 및 Vue.js와 같은 양방향 데이터 바인딩을 지원하는 프레임워크에서 특히 널리 사용

  • .NET 개발에서 WPF, UWP 및 Xamarin 애플리케이션에 선호되는 패턴

  • MVVM은 JavaScript 프레임워크/라이브러리, 특히 풍부한 데이터 바인딩을 지원하는 프레임워크/라이브러리에서 두드러짐

• 사용시기

MVC
데이터(모델), UI(뷰) 및 로직(컨트롤러) 간의
명확한 분리가 필요한 애플리케이션에 이상적
서버 측 렌더링이 관련된 웹 애플리케이션에 유용

MVVM
많은 동적 업데이트가 필요한
복잡한 사용자 인터페이스가 있는 애플리케이션에 가장 적합
양방향 데이터 바인딩을 지원하므로 UI 로직을 단순화하고 GUI 애플리케이션에 적합