[flutter] 플러터 훅 위젯과 데이터 플로우 아키텍처 비교

21 Dec 2023

flutter

플러터는 앱을 빌드하고 개발하기 위한 매우 강력한 프레임워크입니다. 최근에 플러터 훅 위젯과 데이터 플로우 아키텍처가 많은 관심을 받고 있습니다. 이 두 가지 방법을 비교하여 어떻게 다른지 살펴보겠습니다.

1. 플러터 훅 위젯

플러터 훅 위젯은 React의 훅을 모방하여 개발된 것으로, 간단하면서도 강력한 상태 관리를 제공합니다. 이는 상태를 보유할 수 있는 위젯으로 만든 사용자 지정 훅을 통해 StatefulWidget을 피할 수 있게 해줍니다. 이렇게 함으로써 플러터 앱의 성능을 향상시키고 코드를 간결하게 유지할 수 있습니다.

import 'package:flutter_hooks/flutter_hooks.dart';

Widget useCustomHookWidget() {
  var count = useState(0);
  
  return Scaffold(
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('You have pushed the button this many times:'),
          Text(
            '${count.value}',
          ),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () => count.value++,
      tooltip: 'Increment',
      child: Icon(Icons.add),
    ),
  );
}

2. 데이터 플로우 아키텍처

데이터 플로우 아키텍처는 앱의 데이터와 UI를 효율적으로 관리할 수 있는 아키텍처입니다. Provider나 Bloc과 같은 상태 관리 패키지를 사용하여 모델, 뷰 및 비즈니스 로직을 분리합니다. 이를 통해 코드를 재사용하고 테스트하기 쉬운 앱을 개발할 수 있습니다.

class CounterModel extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

class CounterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<CounterModel>(context);

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '${counter.count}',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.increment(),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

결론

플러터 훅 위젯과 데이터 플로우 아키텍처는 각각의 장단점이 있습니다. 플러터 훅 위젯은 코드를 간소화하고 상태를 보다 쉽게 관리할 수 있게 해주지만, 복잡한 상태 관리와 비즈니스 로직을 다루기에는 한계가 있습니다. 반면에 데이터 플로우 아키텍처는 앱을 확장하고 복잡한 로직을 다루기에 적합하지만, 초기 작업 부담이 있을 수 있습니다.

개발자는 앱의 규모와 기대되는 기능을 고려하여 어떤 방식이 더 효율적인지를 신중히 판단해야 합니다.