Flutter Riverpod 상태관리 (1) - 도입

소개

Riverpod 알아보기

Riverpod(Provider의 약자)는 Flutter/Dart를 위한 반응형 캐싱 프레임워크입니다. 네트워크 요청을 자동으로 불러오고, 캐시하고, 결합하고, 다시 계산하는 동시에 오류를 처리할 수 있습니다.

동기

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

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

• 비동기 요청은 UI가 새로 고쳐질 때마다 다시 실행하는 것은 불합리하므로 로컬에 캐시해야 합니다.
• 캐시가 있기 때문에 주의하지 않으면 캐시가 오래되었을 수 있습니다.
• 오류 및 로딩 상태도 처리해야 합니다.

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

• pull to refresh
• infinite lists / fetch as we scroll
• search as we type
• debouncing asynchronous requests
• cancelling asynchronous requests when no-longer used
• optimistic UIs
• offline mode
• ...

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

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

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

 

회의적이신가요? 여기 예시가 있습니다. 다음 스니펫은 Riverpod를 사용하여 구현된 Pub.dev 클라이언트 애플리케이션을 단순화한 것입니다. 조금 의심스럽나요? 여기 예시가 준비되어 있습니다. 다음 코드조각은 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();
}

이 코드는 오류/로드 상태를 처리하면서 '입력하는 대로 검색' + "pull to refresh" + "infinite list" 에 필요한 모든 비즈니스 로직을 담고 있습니다.