(Flutter) Riverpod란?

Riverpod(Provider보다 개선된)는 Flutter/Dart용 반응형 캐싱 프레임워크입니다. 네트워크 요청을 자동으로 가져오고, 캐싱하고, 결합하고, 재계산하는 동시에 오류를 처리할 수 있습니다.

최신 애플리케이션에는 사용자 인터페이스를 렌더링하는 데 필요한 모든 정보가 거의 제공되지 않습니다. 대신 데이터를 서버에서 비동기적로 가져오는 경우가 많습니다.

문제는 비동기 코드 작업이 어렵다는 것입니다. Flutter는 상태를 저장하는 몇 가지 방법을 제공하지만, 그 외에는 별다른 기능을 제공하지 않습니다. 따라서 많은 과제가 해결되지 않은 채로 남아 있습니다.

• 비동기 요청은 UI가 새로 고쳐질 때마다 다시 실행하는 것이 비합리적이므로 로컬에 캐시해야 합니다.
• 캐시가 있으므로 주의하지 않으면 캐시가 만료될 수 있습니다.
• 또한 오류 및 로드 상태를 처리해야 합니다.

이러한 문제를 대규모로 해결하는 것은 어려울 수 있으며, 다음과 같은 많은 기능의 영향을 받습니다:

• 당겨서 새로 고침(pull to refresh)
• 무한(infinite) 목록/스크롤하면서 가져오기
• 입력하면서 검색
• 디바운싱(debouncing) 비동기 요청
• 더 이상 사용하지 않을 때 비동기 요청 취소
• 낙관적 UI: Optimistic UI는 사용자가 액션을 수행한 후 서버 응답을 기다리지 않고 즉시 UI를 업데이트하는 기술이다.
• 오프라인 모드
• …

이러한 기능은 구현하기 까다로울 수 있지만 좋은 사용자 경험을 위해 매우 중요합니다.
그러나 이러한 문제를 직접 해결하려는 패키지는 거의 없으며, 많은 작업을 수동으로 수행해야 합니다.

바로 이런 문제를 해결하기 위해 Riverpod가 등장했습니다.
Riverpod은 Flutter 위젯에서 영감을 받아 비즈니스 로직을 작성하는 새롭고 독특한 방법을 제공함으로써 이러한 문제를 해결하려고 합니다. 여러 가지 면에서 Riverpod는 위젯과 비슷하지만 상태(state)에 대한 것입니다.

이 새로운 접근 방식을 사용하면 이러한 복잡한 기능은 대부분 기본적으로 수행됩니다. 남은 일은 UI에 집중하는 것뿐입니다.

예를 들어 보겠습니다. 다음 스니펫은 Riverpod를 사용하여 구현된 Pub.dev 클라이언트 애플리케이션을 단순화한 것입니다.

// pub.dev에서 패키지 목록을 가져옵니다.
@riverpod  
Future<List<Package>> fetchPackages(  
	FetchPackagesRef ref, {  
	required int page,  
	String search = '',  
}) async {
	final dio = Dio();  
	// API를 가져옵니다. 여기서는 package:dio를 사용하고 있지만 다른 것을 사용할 수도 있습니다. 
	final response = await dio.get(  
		'https://pub.dartlang.org/api/search?page=$page&q=${Uri.encodeQueryComponent(search)}',  
	);  
	  
	// JSON 응답을 Dart 클래스로 디코딩합니다.
	final json = response.data as List;  
	return json.map(Package.fromJson).toList();  
}

이 스니펫은 "입력과 동시에 검색"에 필요한 모든 비즈니스 로직입니다.

---

• 다음: (Flutter) Riverpod 시작하기

---

or

[카카오페이로 후원하기] [토스페이로 후원하기]