[Flutter][Dart] Provider를 활용한 상태 관리

Flutter에서의 상태 관리는 앱의 규모가 커짐에 따라 더 복잡하고 중요해집니다. 상태 관리의 주요 목표 중 하나는 앱의 다른 부분이 변경된 데이터에 의존할 수 있게 하는 것입니다. 이 포스트에서는 Flutter에서 효과적인 상태 관리를 도와주는 Provider에 대해 알아보겠습니다.

Provider란?

Provider는 Flutter에서 상태 관리를 쉽게 만드는 도구입니다. 이는 데이터를 효과적으로 제공하고 변경할 수 있는 방법을 제공합니다. Provider를 사용하면 상태를 관리하고 그 상태에 따라 UI를 업데이트 할 수 있습니다.

Provider의 주요 기능

상태 관리: 앱의 상태를 관리하고 그 상태에 따라 UI를 업데이트합니다.
의존성 주입: Provider는 의존성 주입을 지원하여 애플리케이션 내에서 필요한 데이터나 서비스를 쉽게 전달할 수 있습니다.
성능 최적화: Provider는 'lazy loading'을 지원하므로 필요할 때만 특정 서비스를 생성합니다.

Flutter에서 Provider 사용 예시

가장 기본적인 사용인 ChangeNotifierProvider와 ChangeNotifier를 이용한 상태 관리 방법에 대한 간단한 예를 살펴봅시다.

우선, ChangeNotifier를 확장하여 상태를 관리할 클래스를 만들어 봅시다:

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();  // 상태가 변경되었음을 알립니다.
  }
}

그 다음으로, ChangeNotifierProvider를 이용하여 Counter 인스턴스를 제공하는 위젯 트리를 만들어 봅시다:

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}

마지막으로, Consumer 위젯을 이용하여 Counter 인스턴스를 사용하는 위젯을 만듭니다:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Provider Example'),
        ),
        body: Center(
          child: Consumer<Counter>(
            builder: (context, counter, child) => Text(
              '${counter.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            context.read<Counter>().increment();
          },
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

위 코드에서 Consumer는 Counter의 현재 상태를 구독하고 있으며, 상태가 변경될 때마다 builder 함수를 다시 호출합니다. builder 함수는 counter.count를 이용하여 Text 위젯을 만듭니다.

FloatingActionButton의 onPressed 핸들러에서는 context.read().increment();를 호출하여 Counter의 상태를 변경합니다. 이렇게 하면 Counter의 상태가 변경되고, notifyListeners가 호출되어 Consumer가 다시 빌드됩니다.

Consumer VS context.read

Consumer와 context.read는 모두 Provider에서 제공하는 기능이지만, 사용 목적과 동작 방식에 차이가 있습니다.

Consumer: 이 위젯은 주어진 타입 T의 ChangeNotifier를 구독(subscribe)하고, 해당 ChangeNotifier의 변화에 반응하여 UI를 갱신합니다. 즉, 상태 변화에 따른 UI 갱신이 필요한 경우에 사용됩니다. 예를 들어, Counter의 현재 값을 표시하는 Text 위젯을 Consumer로 감싸게 되면, Counter의 값이 변화할 때마다 Text 위젯이 자동으로 갱신됩니다.

context.read: 이 함수는 주어진 타입 T의 ChangeNotifier를 가져오지만, 변화를 구독하지는 않습니다. 따라서 이를 통해 가져온 ChangeNotifier의 상태 변화에 UI가 갱신되지 않습니다. 이 함수는 주로 상태를 변경하는 액션을 수행할 때 사용됩니다. 예를 들어, 버튼이 클릭될 때 Counter의 값을 증가시키는 등의 상태 변경 작업에 사용됩니다.

요약하자면, Consumer는 상태 변화에 따른 UI 갱신이 필요할 때 사용하고, context.read는 상태 변경 작업을 수행할 때 사용합니다. 이 둘을 적절히 사용함으로써 효과적인 상태 관리를 할 수 있습니다.

결론

Flutter의 Provider 패키지는 상태 관리를 단순하고 효율적으로 만들어줍니다. 위에서 보여드린 것처럼, Provider를 사용하여 상태 관리를 쉽게 구현할 수 있습니다. 앱의 규모가 커지면 커질수록 이런 상태 관리는 더욱 중요해집니다.