[Flutter] Getx로 보는 MVC패턴과 MVVM패턴의 차이

flutter 의 get 패키지를 활용하여 MVC와 MVVM 패턴으로 간단한 카운터 기능을 구현해보았다.

 

MVC패턴과 MVVM패턴의 가장 큰 차이는 View와 Controller의 의존성이다.

 

MVC패턴에서 사용자 요청을 처리해야할 때,

Controller는 View에 대한 정보를 가지고 있고, 사용자 요쳥에 대한 처리 값을 그 View에 반환해주는 역할을 한다.

 

MVVM패턴에서 사용자 요청을 처리해야할 때,

ViewModel은 View에 대한 정보를 가지고 있지 않고, 사용자 요청에 대해서 처리를 했다는 것만 알려주며, 그 변화에 대해 View를 업데이트 하는 것은 View에서 처리한다. 

 

아래는 예제 코드이다.

MVC 예제코드

import 'package:flutter/material.dart';
import 'package:get/get.dart';

// Model
class CounterModel {
  int counter = 0;

  void increment() {
    counter++;
  }
}

// Controller
class CounterController extends GetxController {
  final CounterModel model = CounterModel();

  void increment() {
    model.increment();
    update(); // GetX의 update()를 호출하여 View를 갱신
  }

  int get counter => model.counter;
}

// View
class CounterView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final CounterController controller = Get.put(CounterController());

    return Scaffold(
      appBar: AppBar(
        title: Text('MVC with GetX'),
      ),
      body: Center(
        child: GetBuilder<CounterController>( // GetBuilder를 통해 View가 Controller를 구독
          builder: (_) {
            return Text(
              'Counter: ${controller.counter}',
              style: TextStyle(fontSize: 24),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: CounterView(),
  ));
}

 

위에서 설명한데로 controller에서는 CounterView파일에서 사용한 GetBuilder위젯을 통해 View에 대한 정보를 가지고 있다. 따라서 controller의 increment()함수에서 사용자에 요청에 대한 처리를 하고, GetBuilder에 포함된 View를 아는상태에서 update()를 통해 View에 반환을 해준다.

 

MVVM 예제코드

import 'package:flutter/material.dart';
import 'package:get/get.dart';

// Model
class CounterModel {
  int counter = 0;

  void increment() {
    counter++;
  }
}

// ViewModel
class CounterViewModel extends GetxController {
  var counter = 0.obs; // Observable 변수로 상태 관리

  void increment() {
    counter++;
  }
}

// View
class CounterView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final CounterViewModel viewModel = Get.put(CounterViewModel());

    return Scaffold(
      appBar: AppBar(
        title: Text('MVVM with GetX'),
      ),
      body: Center(
        child: Obx(() { // Obx를 통해 View가 ViewModel의 상태를 구독
          return Text(
            'Counter: ${viewModel.counter}',
            style: TextStyle(fontSize: 24),
          );
        }),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: viewModel.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: CounterView(),
  ));
}

 

MVVM에서는 GetBuilder가 아닌 Obx를 사용한다.

코드로만 보면 MVC와 MVVM의 차이를 못느낄수 있다.

여기서 Obx와 GetBuilder의 차이를 알면 MVC와 MVVM의 차이를 알 수 있다.

 

GetBuilder는 controller에다가 데이터가 포함된 View를 알려주고, 그에 대한 처리를 요청하지만,

Obx는 데이터의 상태를 관리할 뿐, ViewModel에 해당 View에 대한 정보를 알려주지 않는다.

 

.

.

.

 

 

정리하면, MVVM패턴에서 사용하는 Obx는 ViewModel의 상태를 구독할 뿐, ViewModel은 Obx나 View에 대한 정보를 전혀 가지지 않는다.

ViewModel은 단지 상태를 변경하는 역할만 하고, 이 상태를 어떻게 표시할지는 View와 Obx가 담당한다.

 

MVC에서 사용하는 Controller는 update()를 호출할 때 어떤 UI가 업데이트될지를 알아야 하며 GetBuilder를 통해 View에 대한 정보를 가진다. 

이는 Controller가 View의 상태를 암시적으로 제어하는 것을 의미한다.