[flutter] 플러터 Riverpod를 사용하여 상태 관리하는 방법은 어떻게 되나요?

04 Dec 2023

flutter

플러터의 상태 관리는 앱 개발에서 중요한 부분 중 하나입니다. 상태 관리를 효율적이고 쉽게 할 수 있는 방법 중 하나는 Riverpod 라이브러리를 사용하는 것입니다. Riverpod는 Provider 패턴을 기반으로 한 상태 관리 라이브러리로, 플러터 앱의 상태를 관리하고 다른 위젯들에게 상태를 공유할 수 있게 해줍니다.

Riverpod를 사용하기 위해 먼저 flutter_riverpod 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 추가합니다:

dependencies:
  flutter_riverpod: ^1.0.0

이제 Riverpod를 사용하여 상태를 관리하는 방법을 알아보겠습니다. 먼저, 상태를 관리하려는 클래스를 만들어야 합니다. 예를 들어, 특정 숫자를 상태로 관리하는 Counter 클래스를 만들어보겠습니다:

import 'package:flutter_riverpod/flutter_riverpod.dart';

class Counter {
  int _count = 0;
  
  int get count => _count;
  
  void increment() {
    _count++;
  }
}

final counterProvider = Provider<Counter>((ref) => Counter());

위의 코드에서는 Counter 클래스를 정의하고, increment 메서드를 사용하여 count 값을 1 증가시킬 수 있습니다. counterProvider는 Provider 클래스를 사용하여 Counter 객체를 제공하는 역할을 합니다.

이제 위젯에서 useProvider 함수를 사용하여 상태를 사용할 수 있습니다. 예를 들어, 다음과 같이 Counter 값을 표시하고 버튼을 클릭하여 값을 증가시키는 StatelessWidget을 만들어보겠습니다:

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

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Consumer(builder: (context, watch, _) {
          final counter = watch(counterProvider);
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Count: ${counter.count}'),
              ElevatedButton(
                onPressed: () => counter.increment(),
                child: Text('Increment'),
              ),
            ],
          );
        }),
      ),
    );
  }
}

위의 코드에서는 useProvider(counterProvider) 함수를 호출하여 Counter 객체를 가져와 Counter 클래스의 변수를 사용할 수 있습니다. 버튼의 onPressed 이벤트 핸들러에서는 Counter 객체의 increment 메서드를 호출하여 값이 증가되도록 합니다.

이제 상태를 관리하는 방법과 Riverpod를 사용하여 상태를 공유하는 방법에 대해 알아보았습니다. Riverpod는 플러터의 상태 관리를 간편하게 해주는 효과적인 도구입니다. 더 많은 기능과 사용 방법은 공식 문서를 참고하시면 좋습니다.