👨‍💻 [Flutter] Flutter 에서 권장하는 MVVM 모델이 무엇이며, 어떻게 활용할 수 있나요?

👨‍💻 안녕하세요, 윌리 프로젝트의 윌리 입니다.

Flutter 에서 권장하는 MVVM 모델이 무엇이며, 어떻게 활용할 수 있는지 간략히 알아보았습니다.

---

질문 >

Flutter 에서 권장하는 MVVM 모델이 무엇이며, 어떻게 활용할 수 있나요?

답변 >

Flutter에서 권장되는 MVVM(Model-View-ViewModel) 아키텍처는 UI와 비즈니스 로직을 분리하여 코드의 재사용성을 높이고, 유지보수를 쉽게 만드는 디자인 패턴입니다. 이 아키텍처는 특히 상태 관리 라이브러리(예: Provider, Riverpod, GetX, MobX)와 함께 사용되며, Flutter 애플리케이션의 복잡성을 줄이는 데 유용합니다.

---

MVVM의 주요 구성 요소

1. Model:
   • 데이터와 비즈니스 로직을 관리합니다.
   • API, 데이터베이스, 또는 로컬 저장소와의 데이터 처리를 포함합니다.
   • 순수하게 데이터와 관련된 부분만 다루며, UI와 독립적입니다.
2. View:
   • 사용자에게 보여지는 화면(UI)을 담당합니다.
   • StatelessWidget 또는 StatefulWidget으로 구현됩니다.
   • View는 ViewModel에 의존하며, 사용자 이벤트를 전달합니다.
3. ViewModel:
   • View와 Model 사이를 중개하며, 상태 관리와 비즈니스 로직을 처리합니다.
   • View의 요청을 처리하고, Model에서 데이터를 가져와 가공한 후 View로 전달합니다.
   • 상태 관리 라이브러리를 사용하여 View에 상태 변화를 알립니다.

---

MVVM의 흐름

1. View는 사용자 이벤트(예: 버튼 클릭)를 ViewModel에 전달합니다.
2. ViewModel은 Model에서 데이터를 가져오거나 로직을 실행합니다.
3. ViewModel은 상태를 업데이트하고, 이 상태를 View에 전달합니다.
4. View는 ViewModel의 상태를 관찰하여 화면을 업데이트합니다.

---

Flutter에서 MVVM 구현 예제

1. Model

class CounterModel {
  int counter = 0;

  void increment() {
    counter++;
  }
}

2. ViewModel

ViewModel은 상태 관리 라이브러리를 활용하여 View와 Model 간의 중재 역할을 합니다. 여기서는 Provider를 사용합니다.

import 'package:flutter/material.dart';

class CounterViewModel extends ChangeNotifier {
  final CounterModel _model = CounterModel();

  int get counter => _model.counter;

  void increment() {
    _model.increment();
    notifyListeners(); // 상태 변경 알림
  }
}

3. View

Provider를 사용하여 ViewModel의 상태를 관찰하고, 상태가 변경될 때 UI를 업데이트합니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter_viewmodel.dart';

class CounterView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MVVM Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Consumer<CounterViewModel>(
              builder: (context, viewModel, child) {
                return Text(
                  '${viewModel.counter}',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<CounterViewModel>().increment(),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

4. Main

Provider를 설정하여 ViewModel을 View에 전달합니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter_view.dart';
import 'counter_viewmodel.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => CounterViewModel()),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter MVVM',
      home: CounterView(),
    );
  }
}

---

MVVM에서 상태 관리 라이브러리의 활용

Flutter에서 MVVM 아키텍처는 상태 관리 라이브러리와 밀접하게 연관됩니다. 다음 라이브러리들을 활용하여 ViewModel의 상태를 관리하고 View에 알릴 수 있습니다:

1. Provider: Flutter에서 가장 널리 사용되는 상태 관리 라이브러리로, ChangeNotifier와 함께 사용됩니다.
2. Riverpod: Provider의 개선된 버전으로, 더 강력하고 안전한 상태 관리를 제공합니다.
3. GetX: 간단하고 빠른 상태 관리 및 라우팅 솔루션.
4. MobX: 반응형 상태 관리를 제공하며, 코드가 직관적입니다.
5. Bloc/Cubit: 이벤트 기반 상태 관리를 구현할 수 있습니다.

---

MVVM의 장점

1. 코드 분리:
   • UI와 비즈니스 로직을 분리하여 코드가 더 깔끔하고 유지보수가 쉬워집니다.
2. 재사용성:
   • Model과 ViewModel을 재사용 가능하게 만들어 새로운 View에서도 쉽게 사용할 수 있습니다.
3. 유지보수 용이:
   • View와 로직이 분리되어 있어 변경 사항이 있을 때 특정 영역만 수정하면 됩니다.
4. 테스트 가능성:
   • ViewModel과 Model은 View와 독립적이므로 유닛 테스트 작성이 용이합니다.

---

MVVM의 한계

1. 초기 설정이 다소 복잡하며, 간단한 프로젝트에서는 과도할 수 있습니다.
2. 아키텍처의 강제성이 없어 프로젝트가 복잡해질 경우, 일관성을 유지하기 어려울 수 있습니다.

---

결론

Flutter에서 MVVM은 대규모 프로젝트에서 UI와 비즈니스 로직의 분리를 통해 유지보수성과 확장성을 높이는 데 효과적입니다. 상태 관리 라이브러리와 함께 사용하면 MVVM 패턴을 더욱 쉽게 구현할 수 있으며, 협업 및 테스트에도 유리한 구조를 제공합니다.

---

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

---

🎬 유튜브 채널 🎬

위로그@WiLog

🎬 치지직 채널 🎬

위로그 채널 - CHZZK

---