[flutter] 플러터 Riverpod와 상태 관리

플러터(Flutter)는 크로스 플랫폼 모바일 앱 개발을 위한 인기 있는 프레임워크입니다. 플러터를 사용하면 하나의 코드베이스로 안드로이드 및 iOS 앱을 개발할 수 있습니다. 그러나 앱 개발에는 상태 관리가 필수적입니다. 상태 관리는 앱의 데이터 및 UI 상태를 효율적으로 관리하는 중요한 테크닉입니다.

이번에는 플러터와 함께 사용할 수 있는 최신 상태 관리 라이브러리인 Riverpod에 대해 알아보겠습니다. Riverpod는 플러터의 Provider 패턴을 기반으로 한 상태 관리 라이브러리로, 강력한 의존성 주입을 제공합니다.

Riverpod 기초

Riverpod을 사용하려면 flutter_riverpod 패키지를 추가해야 합니다. pubspec.yaml 파일에서 다음과 같이 추가해주세요:

dependencies:
  flutter_riverpod: ^1.0.0

Riverpod은 Provider 클래스를 사용하여 값을 제공합니다. Provider 클래스는 다양한 방법으로 값을 생성하고 공유할 수 있는 기능을 제공합니다. 예를 들어, Provider.value는 기존 객체를 제공하고, Provider.container는 의존성 주입을 활용할 수 있습니다.

상태 값 제공하기

먼저 간단한 카운터 앱을 만들어보겠습니다. provider.dart 파일을 만들고 다음 코드를 추가해주세요:

import 'package:flutter_riverpod/flutter_riverpod.dart';

final counterProvider = Provider<int>((ref) => 0);

counterProvider라는 이름의 Provider를 생성했습니다. 여기서 0은 초기 카운터 값을 의미합니다.

이제 main.dart 파일에서 counterProvider를 사용해보겠습니다:

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ProviderScope(
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Counter App'),
          ),
          body: Center(
            child: Consumer(builder: (context, watch, _) {
              final counter = watch(counterProvider);
              return Text(
                '$counter',
                style: TextStyle(fontSize: 24),
              );
            }),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () => context.read(counterProvider).state++,
            child: Icon(Icons.add),
          ),
        ),
      ),
    );
  }
}

Consumer 위젯을 사용하여 counterProvider의 값을 읽고, Text 위젯을 통해 카운터 값을 표시하고 있습니다. FloatingActionButton을 통해 카운터를 증가시킬 수 있습니다.

상태 값 갱신하기

위의 예제에서 카운터를 증가시키는 부분을 살펴보겠습니다. context.read를 사용하여 counterProvider의 값을 갱신합니다. 이렇게 하면 상태 값이 변경되고 해당 변경사항이 UI에 자동으로 반영됩니다.

상태 값에 접근하기

Provider 클래스를 사용하여 생성한 값에 접근하려면 context.read 또는 watch를 사용합니다. read는 값을 읽어오기만 할 때 사용하고, watch는 값을 감시하고 변경사항을 반영할 때 사용합니다.

종합

이제 플러터 앱에서 Riverpod을 사용하여 상태를 관리하는 기본적인 방법을 알게 되었습니다. Riverpod은 플러터 앱 개발을 더욱 쉽고 효율적으로 만들어주는 강력한 도구입니다.

더 자세한 내용은 Riverpod 공식 문서를 참조하세요.