[Flutter] Riverpod이란?

Riverpod

Riverpod이란?

상태 관리를 돕는 라이브러리이다.
ViewModel 구현을 돕고, View에서 ViewModel을 관찰하기 쉽게 만들어준다.

사용법

1. 관리할 데이터를 담는 상태 클래스를 만든다.
2. ViewModel class를 만든다. 이 때 클래스는 Notifier를 상속한다.
   이 때 연관된 상태 클래스 이름을 명시해야 한다.
3. ViewModel을 관리할 Provider를 만든다.
   이 때 관리할 ViewModel과 상태 클래스 이름을 명시해야 한다.

HomePage 라는 클래스를 만든다고 가정했을 때 클래스를 어떤 식으로 선언해야 하는지 예시를 통해 알아보자.

// HomePage
class HomePage {}

// HomeViewModel
class HomeViewModel extends Notifier<HomeState> { //상태클래스 명시
  @override
  HomeState build() {
    return HomeState();
  }
}

// Provider
final homeViewModelProvider = 
  NotifierProvider<HomeViewModel, HomeState> ( // 뷰모델, 상태클래스 명시
    () {
      return HomeViewModel();
    }
  )

만약 상태를 변경하고 싶다면 ViewModel 안에서 state 변수를 활용해야 한다.

void updateState() {
  state = HomeState(state.num + 1);
}
// state.num + 1 처럼 적으면 작동하지 않는다.
// 변경된 상태를 state 변수에 할당해야 한다.

마지막으로 메인 함수에서 뷰모델 공급자가 뷰모델을 관리할 수 있도록 main 함수에서 ProviderScope 로 앱 전체를 감싸야 한다.

// 기존
runApp(myApp());
// Riverpod 에서
runApp(ProviderScope(child: MyApp()));

ProviderContainer, ProviderScope

위의 두 용어가 무슨 말인지 모르겠어서 더 찾아봤다.

우선 ProviderScope로는 Provider가 상태 관리를 제공할 범위를 지정한다고 한다.
예를 들어 메인 함수에서 MyApp을 ProviderScope의 child로 넣어준다면 앱 전체 범위에서 변화하는 상태를 사용할 수 있다는 뜻인 것 같다.

그 다음 ProviderContainer란 상태 값을 담은 상자 같은 느낌이라고 한다.
상태를 제공하는 Provider를 생성하고 관리한다.

Riverpod의 장점

• 하위 위젯에서 Consumer를 이용해 ViewModel에 원하는 변화를 전달할 수 있다. 따라서 하위 위젯에 파라미터를 넘겨줄 필요가 없다.
• Riverpod이 main함수 단위에서 상태관리를 해주고 있다.
  -> 전역으로 상태관리가 가능하다.
• 화면 구성은 Widget에서 하고 상태 관리는 별도의 상태 클래스에서 해서 두 코드를 각자 분리할 수 있어 관리가 쉽다.

실습

1. home_view_model.dart 파일
   
   HomeState, HomeViewModel, HomeViewModelProvider 를 순서대로 선언하고 있다.

2. home_page.dart 파일
   
   원래 쓰던 StatefulWidget에서 앞에 Consumer가 붙었다.
   Consumer는 Provider가 제공하는 상태를 사용하고 상태 업데이트를 요청하는 위젯을 말한다. Riverpod에서는 이렇게 Stateful 대신 ConsumerStateful 을 사용해야 한다.

3. 값 불러오기
   
   뷰모델의 데이터에 접근하고 싶을 때는 이렇게 ref 를 활용해야 한다.