[Flutter] Riverpod 사용법

RiverPod이란? 

개발자가 상태관리를 편하게 할 수 있도록 도와주는 라이브러리

MVVM 아키텍처 구현과 관리 용이

 

사용법

A. ViewModel 만들기

1. 관리할 데이터를 담을 상태 클래스 만들기

class HomeState{
	int counter;
	HomeState(this.counter);
}

 

2. Notifier를 상속받는 ViewModel 클래스 만들기

class HomeViewModel extends Notifier<HomeState> {
  @override
  HomeState build() {
    return HomeState(1);
  }
  
  void updateState(){
	  state = HomeState(state.counter + 1);
  }
}

 

- 1) Notifier를 상속받으면 상태를 저장하고 업데이트할 수 있는 기능을 갖는다. 

     - ViewModel은 상태가 업데이트될 때 따로 Statefull widget처럼 setState() 하지 않아도 상태가 없데이트되는데, Notifier를 상속받는 것이 그 기능을 하게 해준다.

 

 - 2) Notifier 상속 시 이 ViewModel이 어떤 상태를 관리하는지 제너릭으로 지정해줘야 한다(위 코드 중 Notifier<HomeState>)

 

 - 3) Notifier 클래스의 build 메서드를 재정의해 초기 상태값을 return 한다.

     - Notifier 클래스의 build 메서드는 추상 메서드로 선언되어 있어, Notifier를 상속받은 ViewModel은 반드시 build를 재정의해주어야 한다.

     - '초기값을 리턴한다' 까지만 저장된 규칙이고, 해당 값을 어떻게 설정할 것인지는 사용자가 결정하는 것.

 

3. 뷰모델을 관리 및 공급해 줄 NotifierProvider 객체를 변수에 담는다

final homeViewModelProvider = NotifierProvider<HomeViewModel, HomeState>((){
		return HomeViewModel();
});

 

앞서 만든 HoveViewModel을 Provider로 감싸줌으로써

 - 상태 변경 시 UI 자동 업데이트

 - 필요 없는 경우 정리(dispose) 가 가능해진다. 

 

Provider 생성 시 제너릭으로 관리하는 뷰모델 타입과 관리하는 상태를 명시한다(<HomeViewModel, HomeState>)

 

 

B. 위젯에서 불러오기

Consumer(
	builder: (context, ref, child){
		ref.watch(homeViewModelProvider);
		return Column(children:[
			Text()
		]);
	}
)

 

Consumer : Riverpod 이 정의하는 위젯. Provider의 변경을 감지하고 필요할 때 해당 부분만 리빌드해줌.

 

ref.read(프로바이더) : 1회성. 실행될 때 상태를 읽어 오고 변경은 감지하지 못함

ref.watch(프로바이더) : 상태변경을 감지하여 상태 변경 일어날 때마다 재빌드

 

여기서는 ref.watch를 사용했으므로 HomeViewModel의 HomeState가 변경될 때마다 재빌드가 이루어진다.

 

 

C. 최상위 위젯 ProviderScope로 감싸기

void main() {
  // 이 앱에서 ViewModel을 RiverPod이 관리하게 해주게 해줌
  runApp(const ProviderScope(child: MyApp()));
}