[flutter] 플러터 훅 위젯과 MVVM 패턴 비교

21 Dec 2023

flutter

플러터의 상태 관리에는 Hooks 위젯과 MVVM(MVVM 패턴)이 자주 사용됩니다. 이 두 가지 방법을 비교하여 각각의 특징과 장단점을 알아보겠습니다.

Hooks 위젯

플러터의 Hooks는 함수형 위젯을 작성할 때 상태를 관리하기 위한 도구로, 상태를 추가하기 쉽고 복잡성을 줄일 수 있는 기능을 제공합니다. 이를 통해 상태를 관리하는 데 있어서 더 좋은 경험을 제공할 수 있습니다. Hooks를 사용하면 코드가 더 간결해지고 개발자가 더 직접적으로 상태를 조작할 수 있습니다.

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

void main() => runApp(MyApp());

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final count = useState(0);
    
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('You have pushed the button this many times:'),
              Text(
                '${count.value}',
                style: Theme.of(context).textTheme.display1,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => count.value++,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

MVVM 패턴

MVVM 패턴은 Model-View-ViewModel의 약자로, UI와 비즈니스 로직을 분리하여 관리하는 디자인 패턴입니다. 플러터에서는 Provider나 GetX와 같은 상태 관리 라이브러리를 사용하여 MVVM 패턴을 구현할 수 있습니다. MVVM 패턴은 코드의 가독성을 높이고 재사용성을 증가시키며 유지보수를 용이하게 합니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => CounterViewModel(),
      child: MaterialApp(
        home: Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('You have pushed the button this many times:'),
                Consumer<CounterViewModel>(
                  builder: (context, model, child) {
                    return Text(
                      '${model.count}',
                      style: Theme.of(context).textTheme.display1,
                    );
                  },
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              var model = Provider.of<CounterViewModel>(context, listen: false);
              model.increment();
            },
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
        ),
      ),
    );
  }
}

결론

Hooks와 MVVM 패턴은 각각의 장단점을 가지고 있습니다. Hooks는 함수형 위젯을 더 쉽게 작성할 수 있도록 도와주고, MVVM 패턴은 코드의 가독성과 유지보수성을 높여줍니다. 개발자는 프로젝트의 요구사항과 팀의 선호도를 고려하여 적절한 상태 관리 방법을 선택해야 합니다.

참고 자료: