Riverpod 코드제너레이션에 대해 알아보자!
📍 code_generation이 riverpod에 추가가 된 이유
- (1) 어떤 Provider를 사용할지 결정할 고민 할 필요가 없도록!
- 어떤 종류의 Provider를 쓸지 고민하지 않아도 code_generation을 쓰면 riverpod에서 알아서 결정해줌.
- StateNotifierProvider는 명시적으로 code_generation 할 수 있음.
- (2) Family 파라미터를 일반 함수처럼 사용할 수 있도록!
- Parameter → 리버팟에서는 Family
① pubspec.yaml 수정
② screen/code_generation_screen.dart 파일 생성
③ HomeScreen에 버튼 추가
HomeScreen 코드로 가서 CodeGenerationScreen 버튼을 추가해준다.
④ riverpod/code_generation_provider.dart 파일 생성
⭐Riverpod 역시 code_generation 하려면 part 키워드 무조건 선언!
👉 .g.dat 파일 등록
④-1. .g.dat 파일 등록
④-2. 명시적으로 하기 위해 class 만들기
(잠깐 만들고 다시 코드 지우자!)
familyModifierProvider 코드로 가보자!
int 값을 추가 파라미터(지금 여기서는 그게 data)로 넘겨줄 수 있었음.
그러면 이 값(data)에 따라서 캐싱이 다 따로 됐었음.
그런데 이걸 만약에 int 하나 값이 아니라!!!
여러 개의 파라미터로 넣고싶다면??
data 뒤에 , 하고 추가 불가능! 무조건 한 개밖에 안 되기 때문에...
그럼 하나의 파라미터 안에 여러 개 값을 전달할 수 있는 유일한 방법은...?
맵, 리스트도 가능하지만 명시적으로 하려면 class를 만들어함!
그리고...
FutureProvider.family<List< int >, int>((ref, data) 여기서 int를 Parameter로 바꿔준다.
그런데..... 이것도 귀찮은 과정임!
그래서 그런 고민 속에서 나온 게 바로 code_generation의 (2)이다.
⑤ code_generation이 riverpod에 추가가 된 이유(1) 사용해보기
flutter pub run build_runner build 까지 해 주고 나면
code_generation_provider 파일 밑에 code_generation_provider.g.dart 파일이 잘 생성된 것을 확인할 수 있다.
그리고 이제 gState 함수를 쓰는 게 아니라...
code_generation_provider.g.dart 코드의 gStateProvider라는 함수를 사용하게 된다!
final _testProvider = Provider<String>((ref) => 'Hello Code Generation'); // 이거랑
// code_generation_provider.g.dart 코드의 이거랑 똑같은 거임!
final gStateProvider = AutoDisposeProvider<String>.internal(
gState,
name: r'gStateProvider',
debugGetCreateSourceHash:
const bool.fromEnvironment('dart.vm.product') ? null : _$gStateHash,
dependencies: null,
allTransitiveDependencies: null,
);
// 확인해보자! 확인해보자!
⑥ CodeGenerationScreen 코드 수정하기
⑥-1. StatelessWidget을 ConsumerWidget으로 바꿔주고,
build 함수에 WidgetRef ref 파라미터 추가
⑥-2. watch 해주기
여기서 조금 헷갈렸음.... 당연히 gState를 watch 해줘야 할 거라고 생각했는데,
그게 아니라... g.dart 안에 있는 gStateProvider 임!!!
(gState는 code_generation을 하기 위해 그냥 함수에 정의를 작성한 것이었음!!!)
저장하고 앱을 재실행해서 SelectProviderScreen 버튼을 누른다.
Hello Code Generation 글자가 나오는 걸 볼 수 있는데,
이 값은 어디서 왔을까?!!
code_generation_provider.dart 파일의 return 'Hello Code Generation'; 여기에서 왔음!
return으로 반환을 해줬으니깐.
결국....
final _testProvider = Provider< String >((ref) => 'Hello Code Generation');
// 이거랑
String gState(GStateRef ref) {
return 'Hello Code Generation';
}
// 이 둘은 똑같고
// 아래와 같이 함수 형태로 작성했을 땐 보다 직관적으로 작성할 수 있다.
// 그리고 Code Generation을 통해 여러 가지 추가 기능들을 제공받을 수도 있다.
