Flutter) Riverpod Consumer 사용하기 - 5

 

class MyApp extends ConsumerWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    //ref를 사용해 프로바이더 구독하기
    final counter = ref.watch(counterProvider);

    ref.listen(counterProvider, (previousState, newState) {
      print("The new value is $newState");
    });

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Riverpod Study")),
        body: Center(
          child: Column(
            children: [
              Text(counter.toString()),
              ElevatedButton(
                onPressed: () {
                  ref.read(counterProvider.notifier).state++;
                },
                child: Text("버튼"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

지금까지 ConsumerWidget의 Build안에 ref.watch를 통해 프로바이더의 상태를 감시하고 있다가

변경되면 화면을 재빌드 해주었습니다.

 

 

 

 

이러한 화면이 있다고 해보겠습니다.

버튼을 누르면 숫자가 변하는 화면입니다.

여기에서 위에와 같은 코드로 짠다면 숫자가 변하면서 프로바이더가 화면을 재빌드 합니다.

이때 "Hello World" 텍스트위젯과  버튼 위젯도 같이 재빌드 되면서 자원을 낭비하게 됩니다.

화면에서 변하는 부분은 숫자부분밖에 없으니깐요.

 

이때 Consumer를 사용하면 숫자부분만 재빌드하도록 할 수 있습니다.

 

 

 

Consumer 사용하기

 

final countProvider = StateProvider((ref) => 0);

class HomePage extends ConsumerWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    print("HomePage Build");
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Hello World"),
            Consumer(
              builder: (context, ref, widget) {
                print("Consumer Build");
                final count = ref.watch(countProvider);
                return Text(count.toString());
              },
            ),
            ElevatedButton(
              onPressed: () {
                ref.read(countProvider.notifier).update((state) => ++state);
              },
              child: Text("버튼"),
            ),
          ],
        ),
      ),
    );
  }
}

 

화면을 다시 빌드할 부분을 Consumer로 감싸고 builder에 Callback 위젯을 반환하는 콜백함수를 넣어주면 됩니다.

콜백함수에 인자에는 context, ref, widget을 받습니다.

 

해당 함수에서 ref.watch로 프로바이더를 구독하면 상태가 변하는걸 감시하고 있다가, 

상태가 변하면 Consumer builder안에 있는 위젯들만 재빌드가 됩니다.

 

print()를 찍어서 화면이 빌드될때마다 출력되도록 하였습니다.

 

앱을 실행하면 HomePage가 빌드되고 Consumer가 빌드되는걸 확인했습니다.

 

 

이제 버튼을 눌러 확인하면 Consumer Build  print만 찍히는걸 확인할 수 있습니다.

 

Homepage Build가 안찍히는거보면 Hello World 텍스트 위젯과 버튼 위젯은 재빌드가 되지 않는다는걸 확인할 수 있습니다.

 

이렇게 특정 화면만 재빌드 된다면 Consumer를 사용해서 자원을 아낄 수 있습니다.