MVVM과 RiverPod

MVVM 이란?

 

MVVM 의 동작원리

 

즉, View는 화면 UI를 그려주는 StatelessWidget 부분을 의미하고,

ViewModel은 상태변화를 Model 에게 알려주는 Controller

Model은 해당 데이터값이 저장되는 클래스(객체) 라고 생각하면 된다.

 

이러한 MVVM을 보다 쉽게 구현할 수 있게 해주는것이 상태관리 라이브러리

상태관리 라이브러리에는 Provider, GetX, BloC, LiverPod 등등이 있다.

 

 

< 각 라이브러리의 장단점 >

 

이번 포스팅엔 RiverPod에 대해 알아보자.

 

 

RiverPod

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

Provider와 사용성이 같고, Provider의 문제점을 개선한 버전이라고 생각하면 편하다..고 한다.

 

Riverpod

 

라이브러리 설치

// Terimal
flutter pub add flutter_riverpod

 

RiverPod을 사용하기 위한 사전 준비

void main() {
  // Provider을 사용할 수 있게, 최상위 위젯을 ProviderScrope로 감싸기
  runApp(const ProviderScope(child: MyApp()));
}

 

 

RiverPod 사용하기

1. 데이터를 가지는 Model( Repository), 상태를 관리할 ViewModel ( Provider ), UI를 그리는 View

// 데이터를 저장하는 공간인 Model(Repository)
class HomeState{
  int counter;
  HomeState(this.counter);
}

===========================================================================================

// 데이터의 상태를 관리하는 ViewModel
// Notifier을 상속받아, 상태를 저장하고 업데이트 할 수 있는 기능을 가질 수 있다.
class HomeViewModel extends Notifier<HomeState> {

  // Notifier의 build 메서드를 오버라이드
  // HomeViewMode이 생성되면, Model인 HomeState가 리턴값으로 초기화되며,
  // Notifier의 내장 상태관리 변수인 state에 HomeState가 연결된다.
  @override
  HomeState build(){
    return HomeState(1);
  }
  
  // 상태를 업데이트 할때는, 새로운 Model객체를 만들어서 업데이트해야 한다.
  // state는 Notifier의 내장 상태관리 변수로써, 현재 ViewModel이 관리하는 상태 객체를 의미한다.
  // 즉, state가 업데이트되면, ViewModel를 구독하는 모든 View에 업데이트 사실을 전달한다.
  void updateState(){
    state = HomeState(state.counter + 1);
  }
}

===========================================================================================

// UI를 그리는 View
// ViewModel을 관리, 공급하는 NotifierProvider 생성
// NotifierProvider에게 사용할 ViewModel를 요청하는 방식
// 생성자 형태로써, 이미 ViewModel 이 있으면, 해당 ViewModel을 전달하고,
// 없으면 새로 생성하여 전달함
final homeViewModelProvider = NotifierProvider<HomeViewModel, HomeState>(
  () {
    return HomeViewModel();
  }
);

 

2. 위젯에서 사용하기

Consumer(
  builder: (context, ref, child){
    // 상태읽기 (상태를 변경하지 않을경우)
    // ref.read(homeViewModelProvider);
    
    // 상태 읽고 쓰기 (상태가 변경되면 재빌드)
    ref.watch(homeViewModelProvider);
    
    // 상태관리를 적용할 위젯
    return Column(
      children : [
        Text(),
      ],
    )
  }
)

 

 

ViewModel로 사용되는 Notifier의 종류

• Notifier

참조를 시작하면, 앱이 종료될때까지 유지되는 Notifier

로그인 정보같은, 앱 전반적인부분에서 사용되는 상태를 관리할때 주로 사용

 

• AutoDisposeNotifier

참조하기 시작한 시점부터 처음 참조한 위젯이 화면에서 없어질때 같이 없어지는 Notifier

회원가입 입력정보같이, 일부분의 페이지에서만 일시적으로 유지되는 상태를 관리할때 주로 사용

 

• AutoDisposeFamilyNotifier

AutoDisposeNotifier와 동일하나, ViewModel 최초 생성시 Widget에서 ViewModel에 값을 넘기고 싶을때 사용되는 Notifier

상품상세페이지와 같이, 해당 페이지로 이동할때, 블로그 포스트 정보를 불러와 데이터를 적용시킬때 주로 사용되는 Notifier

 

다른 Notifier와 다르게, View로부터 넘겨받을 값의 타입이 지정되어 있어야 한다.

class HomeViewModel extends AutoDisposeFamilyNotifier<HomeState, int> {}