플러터에서 MVVM 패턴의 ViewModel이란? MVC 패턴과 비교해서 이해하기

 

앱 개발을 하다 보면 MVC, MVVM 같은 아키텍처 패턴을 접하게 됩니다.

이 중 MVVM 패턴에서의 ViewModel은 앱의 구조를 이해하는 데 중요한 역할을 하지만, 많은 초보 개발자들이 이 개념을 헷갈려 합니다. 특히 MVC 패턴과의 차이점을 이해하면 MVVM의 ViewModel 역할이 더 명확해집니다.

이번 글에서는 MVC와 MVVM 패턴을 비교하여 ViewModel이 무엇인지 쉽게 설명하겠습니다.

MVC 패턴이란?

MVC 패턴은 Model-View-Controller로 구성된 전통적인 아키텍처 패턴입니다.

1. Model: 데이터와 비즈니스 로직을 처리합니다. 데이터베이스와의 상호작용이나 API 호출을 담당하는 부분입니다.
2. View: 사용자에게 보여지는 화면(UI)입니다. 예를 들어, Flutter의 위젯이 View 역할을 합니다.
3. Controller: View와 Model 사이에서 중간 역할을 합니다. 사용자의 입력을 받아서 적절한 Model의 데이터를 업데이트하고, 변경된 데이터를 다시 View에 전달하여 화면을 업데이트합니다.

MVC 예시

MVC에서는 Controller가 View와 Model을 연결합니다. 예를 들어, 사용자가 버튼을 클릭하면 Controller가 이를 받아서 Model을 업데이트하고, 업데이트된 데이터를 View에 전달해 UI가 변경됩니다.

MVVM 패턴이란?

MVVM 패턴은 Model-View-ViewModel로 구성된 아키텍처입니다.

MVC와 달리 Controller 대신 ViewModel이라는 개념이 추가되어 View와 Model 간의 연결 방식을 바꾸었습니다.

1. Model: 데이터 및 비즈니스 로직을 처리하는 부분으로, MVC의 Model과 동일합니다.
2. View: 사용자에게 보여지는 UI로, MVVM의 View는 MVC의 View와 거의 동일한 역할을 합니다.
3. ViewModel: View와 Model 간의 데이터를 연결하고 변환하는 중간 다리 역할을 합니다. View와 Model을 직접 연결하지 않고, ViewModel이 데이터를 관리하여 View에 필요한 형태로 가공하여 제공합니다.

ViewModel의 역할

• ViewModel은 데이터와 비즈니스 로직을 View에 제공하는 동시에 View의 상태를 관리합니다.
• View와 ViewModel은 서로 직접 참조하지 않고 바인딩을 통해 데이터의 변화를 감지하고 UI를 자동으로 업데이트합니다.
• 예를 들어, View에서 특정 데이터가 필요하면, ViewModel에서 데이터를 가져와 View에 필요한 형태로 가공하여 제공합니다.

MVC와 MVVM의 차이점

특성MVC 패턴 (Model-View-Controller)MVVM 패턴 (Model-View-ViewModel)

중간 다리 역할	Controller	ViewModel
View와의 연결	Controller가 View에 직접 접근하고 업데이트함	View와 ViewModel은 바인딩(관찰자 패턴)을 통해 연결
데이터 변환	Controller에서 처리	ViewModel에서 처리하여 View에 전달
코드 재사용성	비교적 낮음	높음, 비즈니스 로직을 ViewModel에 분리 가능
단방향/양방향	일반적으로 단방향 (사용자가 요청 → Controller)	주로 양방향 (View ↔ ViewModel)

예제: 사용자의 이름을 입력받고, 환영 메시지를 표시하는 앱

1. MVC 패턴

MVC 패턴에서는 사용자가 이름을 입력하면 Controller가 이를 받아서 Model에 저장합니다. 이후 Controller는 Model에 저장된 이름을 View로 전달하여 화면을 업데이트합니다.

// Model
class UserModel {
  String name;
  UserModel({required this.name});
}

// Controller
class UserController {
  final UserModel model;
  UserController(this.model);

  void updateName(String newName) {
    model.name = newName;
  }
}

// View
class UserView extends StatelessWidget {
  final UserController controller;

  UserView(this.controller);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          onChanged: (text) => controller.updateName(text),
        ),
        Text("Hello, ${controller.model.name}!"),
      ],
    );
  }
}

이 구조에서는 Controller가 Model과 View 사이의 모든 작업을 처리하여, View의 상태를 업데이트합니다.

2. MVVM 패턴

MVVM 패턴에서는 ViewModel이 데이터 처리를 담당합니다.

View는 ViewModel을 관찰하며, 데이터가 업데이트되면 ViewModel이 View에 바로 반영되도록 합니다.

// Model
class UserModel {
  String name;
  UserModel({required this.name});
}

// ViewModel
class UserViewModel extends ChangeNotifier {
  final UserModel model;

  UserViewModel(this.model);

  String get userName => model.name;

  void updateUserName(String newName) {
    model.name = newName;
    notifyListeners(); // View에게 변경을 알림
  }
}

// View
class UserView extends StatelessWidget {
  final UserViewModel viewModel;

  UserView(this.viewModel);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          onChanged: (text) => viewModel.updateUserName(text),
        ),
        Consumer<UserViewModel>(
          builder: (context, viewModel, child) => Text("Hello, ${viewModel.userName}!"),
        ),
      ],
    );
  }
}

이 예제에서는 ViewModel이 변경을 notifyListeners()로 알리면, View가 이를 감지하고 UI를 자동으로 업데이트합니다.

이로 인해 MVC보다 코드의 결합도가 낮아지고, View와 비즈니스 로직이 분리되어 관리가 쉬워집니다.

 

MVC와 MVVM의 가장 큰 차이는 View와 Model을 연결하는 방식입니다. MVC에서는 Controller가 View와 Model을 직접 연결하지만, MVVM에서는 ViewModel이 데이터를 가공하여 View에 제공하고, View는 ViewModel을 관찰하여 UI를 자동으로 업데이트합니다. 이러한 차이로 인해 MVVM 패턴은 앱의 구조를 더욱 모듈화하고 유지보수하기 쉽게 만들어 줍니다.

MVVM 패턴은 앱의 확장성과 유지보수성을 높이는 데 적합하니, 더 복잡한 앱을 개발할 때 활용해 보세요!

 

구독!! 공감과 댓글,

광고 클릭은 저에게 큰 힘이 됩니다.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱