[flutter] 플러터와 Riverpod의 개념

30 Nov 2023

flutter

플러터(Flutter)는 Google이 개발한 오픈 소스 프레임워크로, 모바일, 웹, 데스크톱 등 멀티플랫폼에서 사용할 수 있는 애플리케이션 개발을 위해 사용됩니다. Riverpod는 플러터의 상태 관리 패키지 중 하나로, 간편한 상태 관리를 위한 솔루션을 제공합니다.

1. 플러터와 Riverpod의 상태 관리

플러터에서 상태 관리는 애플리케이션의 데이터를 동기화하고 유지하기 위한 중요한 측면입니다. 플러터는 ‘상태가 변화하면 화면을 다시 그리는’ 방식으로 UI를 업데이트합니다. 따라서 상태 관리는 앱의 성능과 유지보수성에 매우 중요한 역할을 합니다.

Riverpod는 플러터에서 상태 관리를 위한 강력한 라이브러리입니다. Riverpod를 사용하면 상태를 관리하기 위해 전역 상태나 이벤트 버스를 사용할 필요 없이 간단하고 효율적인 상태 관리를 구현할 수 있습니다.

2. Riverpod의 핵심 요소

Riverpod는 Provider와 Consumer라는 두 가지 핵심 요소로 구성됩니다.

Provider

Provider는 상태를 관리하고 제공하는 객체입니다. 즉, 데이터를 제공하고 업데이트하는 역할을 수행합니다. Provider는 ValueNotifier, Stream, Future 등의 데이터 소스로부터 값을 제공할 수 있습니다.

Consumer

Consumer는 Provider가 제공하는 값을 읽고 사용하기 위한 위젯입니다. Consumer는 Provider의 변화를 감지하고 이에 대응하여 화면을 업데이트합니다. Consumer를 통해 특정 Provider를 구독하고, 해당 Provider에 변경이 발생하면 Consumer 위젯은 자동으로 새로고침됩니다.

3. Riverpod의 사용 예제

다음은 Riverpod를 사용한 간단한 예제입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Riverpod Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Consumer(
                builder: (context, watch, _) {
                  final count = watch(counterProvider);
                  return Text(
                    'Count: $count',
                    style: TextStyle(fontSize: 24),
                  );
                },
              ),
              SizedBox(height: 16),
              ElevatedButton(
                onPressed: () {
                  context.read(counterProvider).state++;
                },
                child: Text('Increment'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

위 예제에서는 counterProvider라는 Provider를 정의하고, 이를 Consumer를 통해 사용하여 화면에 표시합니다. Increment 버튼을 누를 때마다 Provider의 값을 증가시키고, Consumer가 변경을 감지하여 화면을 업데이트합니다.

4. Riverpod의 장점

간단한 API를 제공하여 상태 관리를 쉽게 구현할 수 있습니다.
아키텍처를 자유롭게 선택할 수 있습니다. 예를 들어, Provider와 Consumer를 사용하여 단일상태 트리를 구축하거나, 복잡한 위젯 트리를 작성할 수 있습니다.
플러터의 Hot Reload 기능과 함께 사용할 수 있어 개발 시간을 단축시킵니다.