[Flutter] setState와 Provider watch의 차이

setState는 호출하면 해당 StatefulWidget과 하위 위젯들이 변경되고

watch 메서드는 ChageNorifier 상태 변화를 감지하고 호출 위치부터 하위의 모든 위젯들이 재빌드 됩니다.

 

그리고 두가지 모두 하위에 변화가 없는 위젯이 있다면 변화없는 위젯들은 재빌드되지 않습니다.

Flutter는 효율적인 렌더링을 위해 위젯 트리를 비교해 실제 변화가 있는 위젯만을 재빌드하기 때문이죠.

 

별다른 차이가 없어보이는데 공통된 부분이 있는데 어째서 공존하는걸까?

 

사용 방법과 동작 방식에 차이가 존재한다.

setState는 새로운 상태를 설정하고, 그 후 Flutter 프레임워크에게 위젯의 build 메서드를 다시 호출하도록 요청합니다. 따라서 setState를 호출하는 것은 상태가 변경되었음을 Flutter에 알리는 것이며, 이로 인해 위젯이 재빌드됩니다.

class _MyWidgetState extends State<MyWidget> {
  int _counter = 0;

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

  // ...
}

 

watch는 Provider 패키지에서 제공되며 ChangeNorifier의 상태 변화를 감지하고 위젯이 재빌드 되는데 사용됩니다.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final count = context.watch<Counter>().count;

    return Text('Count: $count');
  }
}

이런 사용방법의 차이가 있습니다.

 

그리고 setState는 주로 단순한 상태를 가진 StatefulWidget에서 사용되며, watch는 ChangeNotifier를 사용하여 상태를 관리하는 복잡한 상태 관리 구조에서 사용됩니다.

 

watch가 주로 사용되는 복잡한 상태 관리구조란 여러 위젯이 공유하는 상태, 여러 상태가 서로 의존하는 경우, 상태 변경이 여러 위젯에게 영향을 미치는 경우 등을 말합니다.

예를 들어, 앱 전체에서 사용되는 테마 색상, 사용자 프로필 정보, 로그인 상태, 장바구니의 상품 목록 등은 여러 위젯에서 공유되는 상태입니다. 이런 상태는 특정 위젯에서만 관리하기 어렵고, 복잡한 상태 관리 방법이 필요합니다.

또한, 여러 상태가 서로 의존하는 경우도 복잡한 상태 관리를 필요로 합니다. 예를 들어, 로그인 상태에 따라 사용자 프로필 정보가 변경되고, 이에 따라 여러 위젯의 UI가 변경되는 경우 등이 있습니다.