[Flutter] Riverpod 뽀개기 (3) (feat.Freezed)
이번 글에서는 Riverpod 2.0에서 공개된 (Async) NotifierProvider 활용환 상태관리를 소개해보겠습니다.
StateNotifier, FutureProvider 등 여러가지 Provider가 있지만, 공식문서에서는 새로 공개된 NotifierProvider로 migration 하는 것을 권장하고 있습니다.
NotifierProvider
NotifierProvider는 동기 상태 관리를 위한 Provider입니다. 기존의 StateNotifier와 유사한 역할을 하지만, 더 간단하고 명확한 API를 제공합니다.
특징
- 상태 관리: NotifierProvider는 동기적으로 상태를 관리합니다. 상태를 읽거나 업데이트할 때마다 앱이 자동으로 업데이트됩니다.
- 간단한 API: 기존 StateNotifier와 비교하여 설정과 사용이 간단합니다.
- 리액티브: 상태가 변경될 때마다 관련된 위젯이 자동으로 다시 빌드됩니다.
숫자를 증가,감소 시킬수 있는 앱을 예시로 들어 설명해 보겠습니다.
1. 상태 생성
사용자가 버튼을 클릭한 결과를 저장하는 count 변수를 생성하고, 이 상태를 변경시킬 수 있는 copyWith 함수도 추가해 줍니다.
2. Provider 생성
여기선 NotifierProvider를 이용해 Provider를 생성하였습니다.
- build()에서 초기값 설정
- increment() 증가
- decrement() 감소
3. UI
UI에서는 버튼을 통해 증가, 감소를 시킬 수 있으며, 해당 상호작용을 통해 변경된 결과를 count로 보여줍니다.
AsyncNotifierProvider
AsyncNotifierProvider는 비동기 상태 관리를 위한 Provider입니다. 비동기 작업, 예를 들어 네트워크 요청이나 데이터베이스 접근 등을 처리할 때 사용됩니다.
특징
- 비동기 데이터 처리: 비동기 작업의 결과를 쉽게 관리하고, 로딩 상태나 에러 처리를 쉽게 할 수 있습니다.
- Future와 Stream 지원: 비동기적으로 동작하는 데이터를 처리할 수 있는 구조를 제공합니다.
- 리액티브: 비동기 상태의 변경에 따라 위젯이 자동으로 다시 빌드됩니다.
일반적으로 다음 용도로 사용됩니다.
- 사용자 정의 이벤트에 반응한 후 시간이 지남에 따라 변경될 수 있는 상태를 노출합니다.
- 어떤 상태를 수정하기 위한 논리(일명 "비즈니스 로직")를 한곳에 집중시켜서 시간이 지나도 유지 관리가 용이해지도록 합니다.
1. 상태 생성
2. Provider 생성
NotifierProvider와 다른 점은 AsyncValue에 접근해 로딩 처리 및 값을 할당할 수 있다는 점입니다.
또한 build() 메서드의 Type이 Future라는 점이 다르죠.
1. 로딩처리는 AsyncValue.loading()을 통해 로딩 상태로 만든 후
2. state에 값이 할당되면, loading상태가 해제됩니다.
3. UI
상호작용하는 내용은 Notifier와 동일하지만, 로딩 처리 및 값을 바인딩하는 작업을 UI에서 보여줄 수 있습니다.
아래 내용을 자세히 보시면
state.when을 이용해 data, loading, error 처리를 간편하게 할 수 있다는 점에서 되게 유용합니다.
요약
- NotifierProvider: 동기 상태 관리를 간편하게 할 수 있는 Provider입니다.
- AsyncNotifierProvider: 비동기 작업의 결과를 관리하고, 로딩, 에러 처리 등을 쉽게 할 수 있는 Provider입니다.
추가내용
Freezed를 사용하면, 기존에 상태를 생성할 때 copyWith 메서드를 생성하는 번거로움이 사라집니다.
https://pub.dev/packages/freezed
1. 생성
생성하고자 하는 상태를 HomeState내에 선언
2. command 실행
flutter pub run build_runner watch
3. 결과
Code Generation을 통해 효율도 증가되고 휴먼에러도 줄일 수 있는 거 같아서 좋은 것 같습니다!