[Flutter] - Flutter 앱의 상태 관리 Provider 응용하기

Flutter 를 개발할 때 상태를 어떻게 관리하냐에 따라 앱의 퍼포먼스가 향상할 수 도 있다.

Provider 와 함께 알아야 하는 것으로는 State Management(상태 관리), Dependency Injection(의존성 주입), Synchronizing Data and UI(데이터와 UI의 동기화) 정도가 있는 것 같다.

1. State Management (상태 관리)

Flutter 앱에서는 사용자 입력, 네트워크 요청, 로컬 데이터베이스 변경 등으로 인해 앱의 상태가 동적으로 변한다.
State Management는 이러한 상태들을 관리하는 것으로 상태 관리를 통해 코드의 가독성과 유지보수성을 향상시키며, 앱의 구조를 체계적으로 유지할 수 있다. Provider는 Flutter에서 제공하는 상태 관리 패키지 중 하나로, 의존성 주입 패턴을 기반으로 동작한다.

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

class CounterModel extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('Provider 예시')),
          body: Center(
            child: Consumer<CounterModel>(
              builder: (context, counter, child) => Text(
                'Count: ${counter.count}',
                style: TextStyle(fontSize: 24),
              ),
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              Provider.of<CounterModel>(context, listen: false).increment();
            },
            child: Icon(Icons.add),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

2. Dependency Injection (의존성 주입)

의존성 주입은 객체들 간의 의존 관계를 외부에서 주입하는 디자인 패턴으로, 코드의 결합도를 낮추고 유지보수성을 개선한다.
Provider는 상태 관리를 위해 의존성 주입을 적극적으로 활용한다.
ChangeNotifier 클래스와 Provider 클래스를 통해 상태를 중앙 집중화하고, 위젯 트리 상의 여러 위젯에서 이를 공유하여 의존성 관리를 편리하게 할 수 있다.

class Logger {
  void log(String message) {
    print(message);
  }
}

class MyClass {
  final Logger _logger;

  MyClass(this._logger);

  void doSomething() {
    _logger.log("Doing something!");
  }
}

void main() {
  // 의존성 주입을 통해 Logger 객체를 주입합니다.
  Logger logger = Logger();
  MyClass myClass = MyClass(logger);

  // MyClass의 메서드를 호출합니다.
  myClass.doSomething();
}

3. Synchronizing Data and UI (데이터와 UI의 동기화)

데이터가 변경되면 UI에 즉각 반영되어야 한다.
Provider를 사용하면 상태 변화를 감지하고, 변경 사항을 자동으로 UI에 동기화하는 과정을 간단히 할 수 있다.
ChangeNotifier 클래스를 상속받은 모델을 사용하여 상태를 저장하고, notifyListeners() 메서드를 호출하여 변경 사항을 UI에 알려 리랜더링을 할 수 있다.

CounterModel 클래스를 사용하여 데이터와 UI를 동기화 한다.
이렇게 앱의 상태가 변경될 때 notifyListeners() 메서드를 호출하여 UI를 업데이트 한다.

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

class CounterModel extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('Synchronizing Data and UI 예시')),
          body: Center(
            child: Consumer<CounterModel>(
              builder: (context, counter, child) => Text(
                'Count: ${counter.count}',
                style: TextStyle(fontSize: 24),
              ),
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              Provider.of<CounterModel>(context, listen: false).increment();
            },
            child: Icon(Icons.add),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}