개요

이번 포스트에서는 플러터(Flutter) 앱에서 Riverpod를 사용하여 로그인 인증 처리하는 방법에 대해 알아보겠습니다. Riverpod는 상태 관리 라이브러리로, 플러터 앱의 상태를 효율적으로 관리할 수 있게 도와줍니다. 이를 이용하여 로그인 인증에 필요한 상태를 관리하고, UI에 반영하는 방법을 알아보겠습니다.

Riverpod 설치

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

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.0

설치가 완료되면, 터미널에서 flutter pub get 명령을 실행하여 패키지를 다운로드 받습니다.

Riverpod를 이용한 상태 관리

Riverpod를 사용하여 로그인 인증에 필요한 상태 관리를 시작해보겠습니다. 먼저, provider 패키지에서 StateProvider와 StateNotifierProvider 클래스를 가져옵니다:

import 'package:flutter_riverpod/flutter_riverpod.dart';

다음으로, 인증 상태를 저장하기 위한 StateProvider를 선언합니다:

final authProvider = StateProvider<bool>((ref) => false);

이제 ProviderScope 위젯으로 앱을 감싸면, 상태 관리를 시작할 준비가 됩니다:

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

로그인 처리와 상태 업데이트

이제 로그인 처리 중에 인증 상태를 업데이트하는 로직을 작성해보겠습니다. 예를 들어, 로그인 버튼을 누르면 authProvider의 상태를 true로 업데이트하도록 하겠습니다.

final loginButton = ElevatedButton(
  onPressed: () {
    context.read(authProvider).state = true;
  },
  child: Text('로그인'),
);

이렇게 하면 로그인 버튼을 누를 때마다 authProvider의 상태가 true로 변경됩니다. 이 상태를 이용하여 UI에 로그인 상태를 표시할 수 있습니다.

인증 여부에 따른 UI 변경

인증 상태에 따라 UI를 동적으로 변경해보겠습니다. 예를 들어, 인증 상태가 true인 경우 “환영합니다!”라는 문구를, false인 경우 로그인 버튼을 보여주는 예제입니다:

final authProvider = StateProvider<bool>((ref) => false);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final isAuthenticated = context.watch(authProvider).state;
    
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('로그인 처리'),
        ),
        body: Center(
          child: isAuthenticated
              ? Text('환영합니다!')
              : ElevatedButton(
                  onPressed: () {
                    context.read(authProvider).state = true;
                  },
                  child: Text('로그인'),
                ),
        ),
      ),
    );
  }
}

이제 앱을 실행하면, 초기 로그인 상태는 false로 설정되어 있기 때문에 로그인 버튼이 표시됩니다. 로그인 버튼을 누르면 인증 상태가 true로 변경되고, “환영합니다!” 문구가 표시됩니다.

결론

이렇게 플러터 Riverpod와 함께 로그인 인증 처리를 할 수 있습니다. Riverpod를 사용하면 상태 관리가 간편해지고, UI와 상태 업데이트를 효율적으로 관리할 수 있습니다. 로그인 인증 처리 외에도 다양한 상태 관리에 활용할 수 있으니, 다른 기능을 구현할 때도 Riverpod를 고려해보세요.