[Flutter] Riverpod 상태관리:: 구조화된 접근법과 타입 안전성

Flutter 상태관리에서 Riverpod을 실제 코드를 통해 Riverpod을 공부해보겠습니다.

Riverpod의 구조적 접근

Riverpod은 상태 관리를 여러 레이어로 명확히 분리합니다. 각 요소가 어떤 역할을 하는지 살펴보겠습니다.

1. 상태 클래스: 데이터 구조 정의

class CounterState {
  int count = 0;

  CounterState({required this.count});
}

이 접근법의 장점은 상태의 구조가 명확해진다는 점입니다. CounterState만 보면 이 기능이 어떤 데이터를 관리하는지 즉시 알 수 있어요.

2. Notifier: 로직과 상태 변경

class RiverpodCounterNotifier extends Notifier<CounterState> {
  // 로직
  void countUp() {
    state = CounterState(count: state.count + 1);
    print('RiverpodCounterNotifier - countUp count: ${state.count}');
  }
  
  void countDown() {
    state = CounterState(count: state.count - 1);
    print('RiverpodCounterNotifier - countDown count: ${state.count}');
  }

  @override
  CounterState build() {
    return CounterState(count: 0); // 초기 상태
  }
}

핵심 동작 원리:

Notifier<CounterState> 제네릭

• 타입 안전성: state는 항상 CounterState 타입

state 직접 할당

state = CounterState(count: state.count + 1);

• 새 인스턴스 생성: 기존 상태를 변경하지 않고 새로 생성
• 자동 알림: state 할당 시 자동으로 UI에 알림
• 수동 호출 불필요: notifyListeners() 같은 메서드 호출 없음

build() 메서드

@override
CounterState build() {
  return CounterState(count: 0); // 초기 상태 명시
}

• 초기화 담당: Notifier가 처음 생성될 때 호출
• 초기 시작점: 초기 상태가 어떻게 설정되는지 명시적

3. Provider 정의: 타입 안전성

final riverpodCounterProvider = NotifierProvider<RiverpodCounterNotifier, CounterState>(() {
  return RiverpodCounterNotifier();
});

Provider의 구조 분석:

NotifierProvider<Notifier, State>

• 첫 번째 제네릭: RiverpodCounterNotifier (로직 담당)
• 두 번째 제네릭: CounterState (상태 타입)
• 팩토리 함수: () => RiverpodCounterNotifier() (인스턴스 생성)

4. 앱 설정: ProviderScope

void main() {
  runApp(const ProviderScope(child: RiverpodCounterApp()));
}

ProviderScope의 역할:

• Riverpod 활성화: 모든 Provider 기능 사용 가능
• 의존성 컨테이너: Provider들의 생명주기 관리
• 루트 설정: 앱 전체에서 Provider 접근 가능

5. ConsumerWidget: 상태 구독과 사용

class RiverpodCounterHomePage extends ConsumerWidget {
  RiverpodCounterHomePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(title: Text('RiverPod Counter App')),
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            spacing: 10,
            children: [
              ConsumerCounterText(),
              ElevatedButton(
                onPressed: () {
                  ref.read(riverpodCounterProvider.notifier).countUp();
                },
                child: Text('카운트 증가'),
              ),
              ElevatedButton(
                onPressed: () {
                  ref.read(riverpodCounterProvider.notifier).countDown();
                },
                child: Text('카운트 감소'),
              ),
            ],
          )
        ),
      ),
    );
  }
}

ConsumerWidget의 특징

StatelessWidget 대신 ConsumerWidget:

• WidgetRef ref: 두 번째 매개변수로 ref 제공
• Provider 접근: ref를 통해 모든 Provider에 안전하게 접근
• 생명주기 관리: 위젯이 dispose될 때 자동으로 정리

ref.read()의 용도

ref.read(riverpodCounterProvider.notifier).countUp();

• 일회성 접근: 메서드 호출이나 이벤트 처리용
• 리빌드 없음: 이 코드로 인해 위젯이 다시 빌드되지 않음
• notifier 접근: .notifier로 Notifier 인스턴스에 접근

6. 상태 구독: 별도 Consumer 위젯

class ConsumerCounterText extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Text(
      'Counter.count : ${ref.watch(riverpodCounterProvider).count}',
      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
    );
  }
}

ref.watch()의 핵심

ref.watch(riverpodCounterProvider).count

• 상태 구독: Provider의 상태 변화를 감지
• 자동 리빌드: 상태가 변경되면 이 위젯만 다시 빌드
• 직접 접근: .count로 상태 프로퍼티에 직접 접근

위젯 분리의 이점

• 성능 최적화: 상태가 변경되어도 ConsumerCounterText만 리빌드
• 책임 분리: 버튼들은 리빌드되지 않음
• 재사용성: 다른 곳에서도 쉽게 사용 가능

ref의 세 가지 핵심 메서드

Riverpod에서 ref는 Provider와 상호작용하는 핵심 도구입니다.

ref.watch() - 상태 구독

final state = ref.watch(riverpodCounterProvider);
// 상태가 변경되면 이 위젯이 리빌드됨

ref.read() - 일회성 접근

ref.read(riverpodCounterProvider.notifier).countUp();
// 메서드 호출만, 리빌드 없음

전체 데이터 흐름

ProviderScope
    ↓
riverpodCounterProvider (NotifierProvider)
    ↓
RiverpodCounterNotifier (로직)
    ↓
CounterState (상태)
    ↓
ConsumerWidget (UI)
    ↓
ref.watch() (구독) / ref.read() (액션)

동작 시나리오:

1. 사용자가 버튼 클릭
2. ref.read().countUp() 호출
3. Notifier가 새로운 CounterState 생성
4. state 할당으로 자동 알림
5. ref.watch()를 사용하는 위젯만 리빌드

마무리

Riverpod은 구조화된 상태관리를 통해 안전하고 예측 가능한 앱을 만들 수 있게 해줍니다.

Riverpod의 핵심 요소들:

• CounterState: 명확한 상태 구조
• Notifier<T>: 타입 안전한 로직 관리
• NotifierProvider: 컴파일 타임 검증
• ConsumerWidget: ref를 통한 안전한 접근
• ref.watch/read: 목적에 맞는 상태 사용

코드가 처음에는 복잡해 보였지만, 각 요소의 역할이 명확하고 타입 시스템의 도움을 받을 수 있어 오히려 더 안전하고 편리하였습니다.