Flutter의 상태 관리(State Management)

Flutter에서 상태 관리(State Management)는 애플리케이션의 UI와 데이터 간의 동기화를 유지하는 데 중요한 역할을 합니다. 상태 관리를 효율적으로 구현하면 사용자 인터페이스가 데이터의 변화에 즉각적으로 반응할 수 있습니다. 이번 글에서는 Flutter의 상태 관리 개념과 다양한 상태 관리 기법에 대해 살펴보겠습니다.

1. 상태의 종류

Flutter에서 상태는 두 가지로 나눌 수 있습니다:

1. 임시 상태 (Ephemeral State): 화면의 특정 위젯에 국한된 상태입니다. 예를 들어, 폼의 텍스트 필드나 현재 페이지의 스크롤 위치 등이 포함됩니다. 이런 상태는 주로 StatefulWidget과 setState 메서드를 사용하여 관리합니다.
2. 앱 상태 (App State): 여러 화면이나 전체 애플리케이션에 걸쳐 영향을 미치는 상태입니다. 사용자 인증 정보, 테마 설정, 애플리케이션 설정 등이 이에 해당합니다. 이 상태는 보다 고급 상태 관리 기법을 사용하여 관리합니다.

2. 기본 상태 관리: setState

가장 간단한 상태 관리 방법은 StatefulWidget과 setState를 사용하는 것입니다. 이 방법은 임시 상태를 관리하는 데 주로 사용됩니다.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

 

 

위 코드는 StatefulWidget과 setState를 사용하여 카운터 값을 관리하는 간단한 예제입니다.

3. 상위 상태 관리 기법

앱 상태를 관리하기 위해 Flutter는 다양한 상태 관리 솔루션을 제공합니다. 대표적인 몇 가지를 소개하겠습니다.

 

Provider

Provider는 Flutter 팀이 권장하는 상태 관리 패키지입니다. 간단하고 확장성이 뛰어나며, 다양한 상태 관리 시나리오에 적합합니다.

 

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

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

class Counter extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

 

 

반응형

 

위 예제에서는 Provider 패키지를 사용하여 상태를 관리합니다. ChangeNotifier를 상속받은 Counter 클래스는 상태를 관리하고, notifyListeners를 호출하여 상태 변화를 알립니다. ChangeNotifierProvider를 사용하여 Counter 인스턴스를 위젯 트리에 공급하고, Consumer 위젯을 사용하여 상태 변화를 구독합니다.

 

Riverpod

Riverpod은 Provider의 한계를 극복하기 위해 만들어진 또 다른 상태 관리 솔루션입니다. 더 간단하고 안전한 상태 관리를 제공합니다.

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

final counterProvider = StateProvider<int>((ref) => 0);

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final counter = watch(counterProvider).state;
    return Scaffold(
      appBar: AppBar(
        title: Text('Riverpod Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '$counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read(counterProvider).state++,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

 

 

 

 

위 예제에서는 Riverpod을 사용하여 상태를 관리합니다. StateProvider를 사용하여 상태를 정의하고, ConsumerWidget을 사용하여 상태를 구독합니다.

결론

Flutter에서 상태 관리는 애플리케이션의 UI와 데이터 간의 동기화를 유지하는 데 중요한 역할을 합니다. 기본적인 setState부터 Provider, Riverpod와 같은 고급 상태 관리 솔루션까지 다양한 방법을 통해 효율적으로 상태를 관리할 수 있습니다. 각각의 방법은 특정 시나리오와 요구 사항에 맞게 선택하여 사용할 수 있습니다. 적절한 상태 관리 기법을 사용하여 Flutter 애플리케이션의 성능과 유지보수성을 높여보세요.