Provider와 Stateful

안녕하세요. 답변 도우미입니다.

Flutter에서 위젯의 상태가 바뀌는 경우에는 일반적으로 StatefulWidget을 사용하곤 하지만, Provider와 같은 상태 관리 패키지를 사용하면 StatelessWidget에서도 상태 변경이 가능해집니다. 이게 가능한 이유는 Provider 의 내부 구현 원리 때문인데요. 간단히 설명하면,

Provider의 원리

1. Context: Flutter의 BuildContext를 통해 위젯 트리에서 상태 데이터를 찾을 수 있습니다.

2. InheritedWidget: Provider는 내부적으로 Flutter의 InheritedWidget을 사용하여 데이터를 위젯 트리에 공유합니다. InheritedWidget은 위젯 트리에서 상위 위젯에서 하위 위젯으로 데이터를 전달할 수 있게 해줍니다.

3. Observer 패턴: Provider는 Observer 패턴을 사용하여 상태가 변경될 때마다 관련된 위젯들에 알립니다. 여기서 이야기하는 Observer 패턴이란, 디자인 패턴에서 이야기하는 Observer 패턴입니다. 관련 코드를 Observer 패턴으로 작성하여, 객체가 상태를 변경할 때, 그 객체를 관찰하고 있는 모든 객체에게 자동으로 알림을 전송하게 됩니다.

Stateless와 Provider

StatelessWidget은 자체적으로 상태를 가지고 있지 않기 때문에, 일반적으로는 한 번 그려진 후에 다시 그려지지 않습니다. 그런데 Provider를 사용하면 다음과 같은 과정을 통해 StatelessWidget도 상태에 반응하게 만들 수 있습니다.

1. Provider를 사용하여 상태 데이터를 위젯 트리에 제공합니다.

2. StatelessWidget에서는 Provider.of<T>(context)나 Consumer<T> 위젯을 사용하여 상태 데이터에 접근합니다.

3. 상태 데이터가 변경되면, Provider는 이를 감지하고 관련된 위젯들에 알립니다.

4. 이로 인해 StatelessWidget은 새로운 상태 데이터를 사용하여 다시 그려집니다.

예시 코드

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyModel(),
      child: MaterialApp(
        home: Scaffold(
          body: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final myModel = Provider.of<MyModel>(context);
    return Text(myModel.someValue);
  }
}

class MyModel with ChangeNotifier {
  String someValue = 'Hello';
  
  void changeValue() {
    someValue = 'World';
    notifyListeners();
  }
}

이렇게 Provider는 상태 관리를 추상화하여 StatefulWidget이 아닌 StatelessWidget에서도 상태를 변경하고 관리할 수 있게 해줍니다. 이는 Provider만의 고유한 특징이라기보다는, Flutter의 InheritedWidget과 Observer 패턴을 잘 활용한 결과라고 볼 수 있습니다.

감사합니다.

인프런 커뮤니티 질문&답변