[flutter] 플러터에서의 상태 관리 패턴

30 Nov 2023

flutter

플러터는 구글에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크로, 다양한 기기에서 동작하는 앱을 만들 수 있습니다. 플러터에서는 상태 관리가 매우 중요하며, 상태 관리를 효율적으로 처리하기 위해 다양한 패턴을 사용할 수 있습니다.

플러터에서 상태를 관리하기 위한 가장 기본적인 방법은 Stateful Widget을 사용하는 것입니다. Stateful Widget은 내부에 가변 상태를 가지고 있으며, 이 상태가 변경되면 플러터는 자동으로 화면을 업데이트합니다.

Stateful Widget은 다음과 같이 구현할 수 있습니다:

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool _isClicked = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isClicked = !_isClicked;
        });
      },
      child: Container(
        color: _isClicked ? Colors.blue : Colors.red,
        child: Text(_isClicked ? 'Clicked' : 'Not Clicked'),
      ),
    );
  }
}

위의 예시에서는 _isClicked라는 상태를 관리하고, GestureDetector 위젯을 터치할 때마다 _isClicked의 값을 변경합니다. 이때 setState 함수를 호출하여 상태가 변경되었음을 알려줍니다.

Provider 패키지

플러터에서는 Provider 패키지를 사용하여 상태 관리를 더욱 편리하게 할 수 있습니다. Provider 패키지는 상태 관리를 위한 다양한 클래스와 메서드를 제공하며, 상태 변경 시에만 필요한 부분만 업데이트할 수 있습니다.

Provider 패키지를 사용하려면 다음과 같이 의존성을 추가해야 합니다:

dependencies:
  provider: ^5.0.0

그리고 다음과 같이 상태를 관리하고자 하는 클래스를 생성합니다:

class CounterModel extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

이제 위에서 생성한 클래스를 사용하여 상태 관리를 할 수 있습니다. 예를 들어, 다음과 같이 Consumer 위젯을 사용하여 상태 변경 시에만 필요한 부분을 업데이트할 수 있습니다:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('State Management Example'),
      ),
      body: Center(
        child: Consumer<CounterModel>(
          builder: (context, counter, child) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Count: ${counter.count}',
                  style: TextStyle(fontSize: 24),
                ),
                ElevatedButton(
                  onPressed: () {
                    counter.increment();
                  },
                  child: Text('Increment'),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

위의 예시에서 CounterModel 클래스의 increment 메서드를 호출하여 상태를 변경하면, Consumer 위젯 내에서 builder 함수가 호출되고 화면이 업데이트됩니다.

MobX 패키지

MobX는 상태 관리를 위한 또 다른 패키지로, 플러터에서 사용하기 쉬운 문법과 간결한 코드 작성을 지원합니다. MobX를 사용하기 위해서는 다음과 같이 의존성을 추가해야 합니다:

dependencies:
  mobx: ^2.0.0
  flutter_mobx: ^2.0.0

MobX의 사용 예시는 다음과 같습니다:

class Counter = _CounterBase with _$Counter;

abstract class _CounterBase with Store {
  @observable
  int count = 0;

  @action
  void increment() {
    count++;
  }
}

위 예시에서는 @observable으로 상태 변수를 지정하고, @action으로 상태를 변경하는 메서드를 지정합니다. 이후 위의 클래스를 사용하여 화면을 업데이트할 수 있습니다.

MobX는 flutter_mobx 패키지를 통해 플러터와 통합되며, Observer나 MobxProvider를 사용하여 상태를 관리할 수 있습니다.

결론

플러터에서는 상태 관리를 위한 다양한 패턴과 패키지를 제공하고 있습니다. 각 패턴과 패키지는 특성과 개발자 선호도에 따라 선택하여 사용할 수 있습니다. 적절한 상태 관리 패턴을 선택하여 효율적인 앱 개발을 진행해보세요.