Riverpod을 이용하여 상태 관리하기

주요 특징

1. 상태 의존성: 상태와 그 상태에 의존하는 다른 상태 간의 관계를 명확하게 선언할 수 있습니다.

2. 안전한 상태 관리: Riverpod은 전역 상태를 안전하게 관리할 수 있는 방법을 제공합니다.

3. 재사용성: 상태를 재사용하고, 여러 위젯에서 쉽게 공유할 수 있습니다.

4. 테스트 용이성: Riverpod을 사용하면 상태와 비즈니스 로직을 독립적으로 테스트하기가 용이합니다.

기본 개념

1. Provider: 상태(데이터)를 제공하는 역할을 합니다. 여러 가지 provider 유형이 있습니다.
• StateProvider: 단순한 상태를 관리합니다.
• NotifierProvider: 상태를 관리하기 위한 클래스(Notifier)를 제공합니다.
• StreamProvider: 스트림을 관리합니다.
• FutureProvider: 비동기 데이터를 관리합니다.

1. 의존성 주입 및 플러그인 설치

2. 기본적인 클래스 작성 내용

필수! 메인 메서드 변경 내용 :

void main() {
  runApp(ProviderScope(child: MyApp())); // 여기가 중요!
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

• 위와 같이 ProviderScope로 MyApp을 감싸야만 아래 예제를 실행할 수 있습니다.

• MyApp의 build 메서드가 호출되면 HomePage 클래스의 build 메서드가 호출됩니다.

HomePage 클래스 내용 :

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

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) { // ref는 창고 관리자에게 접근할 수 있는 변수

    print("HomePage build...");

    return Scaffold(
      body: HomeBody(),
    );
  }
}

• build가 호출되면 Scaffold(body에 HomeBody를 호출) 를 return합니다.

• 상태가 변경됨에 따라 리빌드 할 때 Scaffold까지 리빌드하지 않기 위해 HomeBody를 따로 구성하였습니다.

3. 상태 관리 관련 내용

HomeBody 클래스 내용 :

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'home_page_vm.dart';

class HomeBody extends ConsumerWidget {

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    print("HomeBody build...");

    int count = ref.watch(countProvider); // 이 때 창고가 만들어진다. watch를 통해 창고를 만들게 되면 스트림이 유지되며, 상태값이 변경되면 자동으로 리빌드 된다
    // ref.read(countProvider); // watch와 동일하나, 스트림은 유지하지 않고 끊어진다.
    CountVM vm = ref.read(countProvider.notifier); // write 하기 위해 객체 자체를 준다. (객체의 메서드를 호출하여 상태를 변경시키라는 뜻)

    return Center(child: Column(
      children: [
        OutlinedButton(onPressed: () {
          vm.add();
        }, child: Text("증가")),
        Text("$count", style: TextStyle(fontSize: 50),),
      ],
    ));
  }
}

주요 개념

1. ref.watch(countProvider):
• 설명: watch는 countProvider가 만든 상태를 구독하고, 상태가 변경될 때 위젯을 리빌드합니다. 자료를 지속적으로 감시(스트림 유지)하므로, 상태가 변할 때마다 UI를 업데이트합니다.

2. ref.read(countProvider):
• 설명: read는 countProvider의 현재 상태를 반환하지만, 상태 변화에 대한 지속적인 감시는 하지 않습니다. 즉, 한 번만 읽고 이후 상태 변경에 대해서는 반응하지 않습니다.

3. ref.read(countProvider.notifier):
• 설명: read를 사용하여 countProvider의 notifier 객체를 가져옵니다. 이를 통해 상태 변경 메서드(여기서는 vm.add())를 호출할 수 있습니다. notifier는 상태를 작성하고 관리하는 객체입니다.

ViewModel 내용 :

import 'package:flutter_riverpod/flutter_riverpod.dart';

// 창고 관리자
final countProvider = NotifierProvider<CountVM, int>(() {
  print("창고 만들어짐");
  return CountVM();
});

// 창고
class CountVM extends Notifier<int> {
  @override
  int build() {
    return 20;
  }

  void add() {
    state = state + 1;
  }
}

1. Providor 정의

final countProvider = NotifierProvider<CountVM, int>(() {
  print("창고 만들어짐");
  return CountVM();
});

• NotifierProvider는 상태를 관리하는 프로바이더입니다. 여기서는 CountVM라는 클래스의 인스턴스를 생성하여 제공합니다.

• 역할: countProvider는 '창고 관리자'로서 CountVM의 인스턴스를 관리합니다. NotifierProvider를 사용하여 Riverpod의 상태 관리를 쉽게 통합할 수 있습니다.

2. CountVM 클래스

class CountVM extends Notifier<int> {
  @override
  int build() {
    return 20;
  }
  
  void add() {
    state = state + 1;
  }
}

• CountVM 클래스는 Notifier<int>를 상속받아 상태 관리 기능을 확장합니다.

• build 메서드: build 메서드는 Notifier의 초기 상태를 설정합니다. 여기서는 초기 상태를 20으로 설정하고 있습니다.

• add 메서드: state 변수를 증가시키는 메서드입니다. 상태 값을 1씩 증가시킵니다.

흐름

1. NotifierProvider를 통해 CountVM 인스턴스를 생성하여 countProvider를 정의합니다.

2. CountVM 클래스는 Notifier<int>를 상속받아 상태를 관리합니다.

3. build 메서드는 초기 상태를 설정합니다 (20).

4. add 메서드는 상태를 1씩 증가시킬 수 있습니다.

위의 내용을 한번에 정리하기