[Flutter] 상태관리 라이브러리 - Riverpod

Riverpod 개요

Riverpod는 기존 Provider 패키지의 한계를 보완하여 더욱 유연하고 안정적인 상태 관리를 제공하는 라이브러리이다.

컴파일 타임에 오류를 감지할 수 있어, 개발 중 발생할 수 있는 실수를 줄일 수 있으며, 반응형 패러다임을 기반으로 한다.

특징

Riverpod는 다음과 같은 핵심 개념을 기반으로 동작한다.

• Providers: 데이터의 원본을 선언하는 역할을 한다.
• Consumers: Provider를 구독하여 데이터의 변경 사항에 따라 UI를 재구성한다.
• Notifiers: Provider의 상태를 업데이트하는 역할을 한다.

또한, 내부적으로 스트림을 활용하여 Provider의 상태 변화가 발생하면 자동으로 Consumer가 업데이트된다.

기존 Provider보다 타입 안정성이 향상되었으며, 상태 객체를 보다 쉽게 테스트할 수 있다는 장점이 있다.

작동 방식

1. 상태를 관리할 Provider를 선언한다.
2. 애플리케이션을 Provider 컨테이너로 감싼다.
3. UI 컴포넌트에서 Consumer를 사용하여 Provider에 접근한다.
4. Notifier를 통해 Provider의 상태를 변경한다.
5. Consumer는 상태 변경을 감지하고 UI를 자동으로 갱신한다.

장점

• 타입 안정성이 향상되어 안정적인 개발 환경을 제공한다.
• 상태 관리 로직을 보다 쉽게 테스트하고 유지보수할 수 있다.
• 기존 Provider보다 다양한 기능을 지원하며, 여러 상태 관리 시나리오에 유연하게 대응할 수 있다.

단점

• 새로운 개념과 패턴을 이해하는 데 시간이 필요하여 초보자에게는 러닝 커브가 높을 수 있다.
• 기존 Provider 사용자라면 Riverpod의 접근 방식에 익숙해지는 데 적응 시간이 필요할 수 있다.

Riverpod는 강력한 기능과 높은 유연성을 제공하는 만큼, 한 번 익히면 다양한 상황에서 효과적으로 활용할 수 있는 강력한 상태 관리 도구가 된다.

---

사용 예시 

• 카운터 값을 저장하는 StateNotifierProvider를 사용
• UI에서 ConsumerWidget을 활용하여 상태를 구독 및 업데이트

---

1. pubspec.yaml에 Riverpod 추가

먼저 pubspec.yaml에 flutter_riverpod 패키지를 추가해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.0.0

---

2. Counter Provider 선언 (counter_provider.dart)

import 'package:flutter_riverpod/flutter_riverpod.dart';

// 상태를 관리하는 Notifier 클래스
class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);

  void increment() => state++;
  void decrement() => state--;
}

// StateNotifierProvider 생성
final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) {
  return CounterNotifier();
});

---

3. UI에서 상태 사용 (main.dart)

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'counter_provider.dart'; // Provider를 import

void main() {
  runApp(const ProviderScope(child: MyApp())); // ProviderScope로 감싸기
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider); // 상태 구독

    return Scaffold(
      appBar: AppBar(title: const Text('Riverpod Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Count: $count',
              style: const TextStyle(fontSize: 24),
            ),
            const SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  onPressed: () => ref.read(counterProvider.notifier).decrement(),
                  icon: const Icon(Icons.remove),
                ),
                IconButton(
                  onPressed: () => ref.read(counterProvider.notifier).increment(),
                  icon: const Icon(Icons.add),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

---

설명

1. Provider 선언 (counter_provider.dart)
   • StateNotifierProvider를 사용하여 CounterNotifier를 생성
   • state를 활용하여 카운터 값을 저장 및 업데이트
2. UI에서 Provider 사용 (main.dart)
   • ref.watch(counterProvider)를 사용하여 상태를 구독
   • ref.read(counterProvider.notifier).increment()를 호출하여 상태 변경
   • UI는 상태가 변경될 때마다 자동으로 업데이트

---

결과 화면

• + 버튼을 누르면 숫자가 증가
• - 버튼을 누르면 숫자가 감소