[flutter] 플러터 훅 위젯과 MVC 패턴 비교
목차
플러터 훅(Hook) 위젯
플러터 훅 위젯은 플러터 프레임워크에서 제공하는 기능으로, 상태변수와 라이프사이클 훅을 이용하여 위젯의 로직을 분리할 수 있다. 이를 통해 코드를 간결하고 읽기 쉽게 작성할 수 있다. 플러터 훅 위젯은 함수형 프로그래밍의 장점을 살려 상태 관리와 UI 업데이트를 쉽게 할 수 있다.
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
class Counter extends HookWidget {
@override
Widget build(BuildContext context) {
final count = useState(0);
return Scaffold(
appBar: AppBar(
title: Text('Counter App'),
),
body: Center(
child: Text('Count: ${count.value}'),
),
floatingActionButton: FloatingActionButton(
onPressed: () => count.value++,
child: Icon(Icons.add),
),
);
}
}
MVC 패턴
MVC 패턴은 모델(Model), 뷰(View), 컨트롤러(Controller)로 구성되어 있다. 데이터, 비즈니스 로직, UI 로직을 분리하여 애플리케이션의 유지보수와 확장성을 높일 수 있다. 모델은 데이터를 처리하고, 뷰는 사용자에게 데이터를 표시하며, 컨트롤러는 사용자 입력을 처리하고 모델을 업데이트한다.
class CounterModel {
int _count = 0;
int get count => _count;
void increment() {
_count++;
}
}
class CounterController {
CounterModel _model;
CounterController(this._model);
void increment() {
_model.increment();
}
}
class CounterView {
CounterController _controller;
CounterView(this._controller);
void build() {
print('Count: ${_controller.model.count}');
}
}
비교
코드의 복잡도
- 플러터 훅 위젯: 코드가 간결하고 직관적이다.
- MVC 패턴: 컨트롤러와 모델을 별도로 정의해야 하므로 코드가 복잡해질 수 있다.
재사용성
- 플러터 훅 위젯: 훅을 이용하여 로직과 UI를 쉽게 재사용할 수 있다.
- MVC 패턴: 뷰와 컨트롤러가 강하게 결합될 수 있어 재사용이 어려울 수 있다.
상태 관리
- 플러터 훅 위젯: 훅을 이용하여 상태 관리를 쉽게 할 수 있다.
- MVC 패턴: 상태 관리를 위해 추가적인 라이브러리나 코드가 필요할 수 있다.
결론
플러터 훅 위젯은 코드의 간결성과 상태 관리의 용이성 등 많은 장점을 가지고 있으며, MVC 패턴과 비교하여 프로젝트의 복잡도를 낮출 수 있다.