Flutter 상태 관리: Riverpod vs BLoC - 완전 비교 가이드

Flutter 상태 관리를 위한 Riverpod 3.x와 BLoC 9.x의 심층 비교입니다. 아키텍처, 자동 재시도, 테스트 용이성, 사용 사례를 통해 최적의 솔루션을 선택합니다.

Flutter 상태 관리를 위한 Riverpod와 BLoC 비교

상태 관리는 Flutter 개발의 핵심 과제입니다. Riverpod와 BLoC가 생태계를 지배하며, 각각 고유한 철학을 제시합니다. 본 가이드는 프로젝트 요구사항에 따른 선택을 돕기 위해 두 솔루션을 구체적인 구현으로 비교합니다.

전제 조건

본 가이드는 Flutter와 상태 관리 기초에 대한 이해를 전제합니다. 예제는 2026년 현재 안정 버전인 Riverpod 3.x와 flutter_bloc 9.x를 사용합니다.

두 접근 방식의 핵심 철학

Riverpod와 BLoC는 동일한 문제를 정반대의 패러다임으로 해결합니다. 이러한 개념적 차이를 이해하면 각 상황에 적합한 도구를 선택할 수 있습니다.

Riverpod는 선언적이고 반응형 접근을 채택합니다. provider가 widget이 관찰하는 데이터 소스를 정의합니다. 프레임워크가 생명주기, 캐싱, provider 간 의존성을 자동으로 관리합니다. 버전 3.0에서 중요한 개선이 이루어졌습니다. 실패한 provider의 자동 재시도, widget 가시성에 따른 리스너 일시 정지 및 재개, 실험적인 오프라인 영속화 등이 포함됩니다.

BLoC(Business Logic Component)는 이벤트 기반의 엄격한 아키텍처를 강제합니다. 컴포넌트가 이벤트를 발행하고, Bloc이 이를 처리해 새로운 상태를 생성합니다. 이 명시적인 분리가 데이터 흐름의 추적을 용이하게 합니다. 버전 9.x에서는 테스트 유연성을 향상시키는 EmittableStateStreamableSource가 도입되었습니다.

riverpod_philosophy.dartdart
// Riverpod 3.x: Notifier replaces StateNotifier as the standard pattern
@riverpod
class Counter extends _$Counter {
  @override
  int build() => 0;
  
  void increment() => state++;
}

// Usage in a widget
class CounterWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // Reactive read: automatic rebuild if value changes
    final count = ref.watch(counterProvider);
    return Text('$count');
  }
}
bloc_philosophy.dartdart
// BLoC 9.x: explicit events/states separation
sealed class CounterEvent {}
final class IncrementPressed extends CounterEvent {}

class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    // Each event has its dedicated handler
    on<IncrementPressed>((event, emit) => emit(state + 1));
  }
}

// Usage in a widget
class CounterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CounterBloc, int>(
      builder: (context, count) => Text('$count'),
    );
  }
}

두 접근 방식 중 어느 쪽을 선택할지는 팀의 선호와 프로젝트 제약에 따라 달라집니다. GetX를 포함한 상태 관리 옵션에 대한 개요는 2026년 Flutter 상태 관리 완전 비교를 참조하십시오.

초기 설정

초기 설정에서 두 솔루션 사이의 사용성 차이가 드러납니다. Riverpod는 단순함을, BLoC는 더 많은 구조를 제공합니다.

Riverpod 설치

Riverpod는 단일 패키지와 애플리케이션 루트의 wrapper만 필요합니다. 버전 3.x에서는 riverpod_generator를 사용한 코드 생성이 권장되는 접근 방식입니다.

main.dartdart
// Riverpod configuration: single wrapper at root
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(
    // ProviderScope wraps the entire application
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

BLoC 설치

BLoC는 여러 패키지와 사용하는 각 Bloc마다 BlocProvider를 두는 더 정교한 설정이 필요합니다.

main.dartdart
// BLoC configuration: explicit providers for each Bloc
import 'package:flutter_bloc/flutter_bloc.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // MultiBlocProvider for multiple Blocs
    return MultiBlocProvider(
      providers: [
        BlocProvider(create: (_) => AuthBloc()),
        BlocProvider(create: (_) => ThemeBloc()),
      ],
      child: MaterialApp(
        home: HomeScreen(),
      ),
    );
  }
}

BLoC 설정은 초기 코드량은 많지만, 의존성을 처음부터 명시적으로 드러냅니다.

단순한 상태 관리: 카운터와 토글

단순한 사례에서 각 솔루션의 일상적인 사용성이 드러납니다. Riverpod는 간결함에서 두드러지고, BLoC는 이벤트 기반 구조를 유지합니다.

Riverpod 카운터 (Notifier 패턴)

Riverpod 3.x에서는 StateProvider와 StateNotifierProvider가 deprecated되고 통합된 Notifier API로 대체되었습니다. 새로운 패턴은 더 깔끔하고 코드 생성과 원활하게 작동합니다.

counter_riverpod.dartdart
// Notifier pattern: the standard in Riverpod 3.x
@riverpod
class Counter extends _$Counter {
  @override
  int build() => 0;

  void increment() => state++;
  void decrement() => state--;
  void reset() => state = 0;
}

class CounterScreen extends ConsumerWidget {
  const CounterScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // watch for reactive value
    final count = ref.watch(counterProvider);

    return Scaffold(
      body: Center(child: Text('Count: $count')),
      floatingActionButton: FloatingActionButton(
        // read for actions (no rebuild)
        onPressed: () => ref.read(counterProvider.notifier).increment(),
        child: const Icon(Icons.add),
      ),
    );
  }
}

BLoC 카운터

counter_bloc.dartdart
// Typed events for each possible action
sealed class CounterEvent {}
final class CounterIncremented extends CounterEvent {}
final class CounterDecremented extends CounterEvent {}
final class CounterReset extends CounterEvent {}

// Bloc with handlers for each event
class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<CounterIncremented>((event, emit) => emit(state + 1));
    on<CounterDecremented>((event, emit) => emit(state - 1));
    on<CounterReset>((event, emit) => emit(0));
  }
}

class CounterScreen extends StatelessWidget {
  const CounterScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: BlocBuilder<CounterBloc, int>(
          builder: (context, count) => Text('Count: $count'),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // Event dispatch to modify state
        onPressed: () => context.read<CounterBloc>().add(CounterIncremented()),
        child: const Icon(Icons.add),
      ),
    );
  }
}

단순한 사례에서는 Riverpod가 보일러플레이트를 크게 줄여 줍니다. 로직이 복잡해지거나 이벤트 추적성이 중요할 때 BLoC의 가치가 드러납니다.

Riverpod 3.x의 레거시 Provider

StateProvider와 StateNotifierProvider는 계속 동작하지만 flutter_riverpod/legacy.dart에서 import해야 합니다. 새 코드에는 Notifier 또는 AsyncNotifier를 사용하십시오.

비동기 상태 관리: API 호출

비동기 작업은 각 솔루션의 강점을 드러냅니다. loading, error, data 상태의 관리가 핵심 과제입니다. Riverpod 3.x는 실패한 provider에 대해 지수 백오프가 포함된 자동 재시도를 도입했습니다.

Riverpod 비동기 데이터

async_riverpod.dartdart
// AsyncNotifier: automatic loading/error/data management with retry
@riverpod
class Users extends _$Users {
  @override
  Future<List<User>> build() async {
    // autoDispose releases resources when provider is no longer used
    // Automatic retry on failure (exponential backoff: 200ms to 6.4s)
    final repository = ref.watch(userRepositoryProvider);
    return repository.fetchUsers();
  }

  Future<void> refresh() async {
    state = const AsyncLoading();
    state = await AsyncValue.guard(() => build());
  }
}

class UsersScreen extends ConsumerWidget {
  const UsersScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final usersAsync = ref.watch(usersProvider);

    // when handles all 3 possible states
    return usersAsync.when(
      loading: () => const Center(child: CircularProgressIndicator()),
      error: (error, stack) => Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Error: $error'),
            ElevatedButton(
              // invalidate forces reload
              onPressed: () => ref.invalidate(usersProvider),
              child: const Text('Retry'),
            ),
          ],
        ),
      ),
      data: (users) => ListView.builder(
        itemCount: users.length,
        itemBuilder: (context, index) => UserTile(user: users[index]),
      ),
    );
  }
}

BLoC 비동기 데이터

async_bloc.dartdart
// Explicit states for each loading phase
sealed class UsersState {}
final class UsersInitial extends UsersState {}
final class UsersLoading extends UsersState {}
final class UsersLoaded extends UsersState {
  final List<User> users;
  UsersLoaded(this.users);
}
final class UsersError extends UsersState {
  final String message;
  UsersError(this.message);
}

// Events to trigger actions
sealed class UsersEvent {}
final class UsersFetchRequested extends UsersEvent {}
final class UsersRefreshRequested extends UsersEvent {}

class UsersBloc extends Bloc<UsersEvent, UsersState> {
  final UserRepository _repository;

  UsersBloc(this._repository) : super(UsersInitial()) {
    on<UsersFetchRequested>(_onFetchRequested);
    on<UsersRefreshRequested>(_onRefreshRequested);
  }

  Future<void> _onFetchRequested(
    UsersFetchRequested event,
    Emitter<UsersState> emit,
  ) async {
    emit(UsersLoading());
    try {
      final users = await _repository.fetchUsers();
      emit(UsersLoaded(users));
    } catch (e) {
      emit(UsersError(e.toString()));
    }
  }

  Future<void> _onRefreshRequested(
    UsersRefreshRequested event,
    Emitter<UsersState> emit,
  ) async {
    // Keep current state during refresh
    final currentState = state;
    try {
      final users = await _repository.fetchUsers();
      emit(UsersLoaded(users));
    } catch (e) {
      // Restore previous state on error
      if (currentState is UsersLoaded) {
        emit(currentState);
      } else {
        emit(UsersError(e.toString()));
      }
    }
  }
}
users_screen_bloc.dartdart
// Widget with pattern matching on states
class UsersScreen extends StatelessWidget {
  const UsersScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<UsersBloc, UsersState>(
      builder: (context, state) {
        return switch (state) {
          UsersInitial() => Center(
              child: ElevatedButton(
                onPressed: () => context.read<UsersBloc>().add(UsersFetchRequested()),
                child: const Text('Load'),
              ),
            ),
          UsersLoading() => const Center(child: CircularProgressIndicator()),
          UsersError(:final message) => Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Error: $message'),
                  ElevatedButton(
                    onPressed: () => context
                        .read<UsersBloc>()
                        .add(UsersFetchRequested()),
                    child: const Text('Retry'),
                  ),
                ],
              ),
            ),
          UsersLoaded(:final users) => ListView.builder(
              itemCount: users.length,
              itemBuilder: (context, index) => UserTile(user: users[index]),
            ),
        };
      },
    );
  }
}

BLoC는 각 상태 전이를 세밀하게 제어합니다. Riverpod는 AsyncValue와 내장된 재시도 로직으로 더 많은 부분을 자동화합니다.

Flutter 면접 준비가 되셨나요?

인터랙티브 시뮬레이터, flashcards, 기술 테스트로 연습하세요.

Flutter 탐색하기

상태 간 의존성: 컴포지션과 주입

실제 애플리케이션에는 상호 의존하는 상태가 존재합니다. 이러한 의존성의 관리가 두 접근을 크게 구분짓습니다.

Riverpod 컴포지션

composition_riverpod.dartdart
// Base provider: configuration
@riverpod
ApiClient apiClient(Ref ref) {
  final baseUrl = ref.watch(environmentProvider).apiUrl;
  return ApiClient(baseUrl: baseUrl);
}

// Dependent provider: repository
@riverpod
ProductRepository productRepository(Ref ref) {
  // Automatic client injection
  final client = ref.watch(apiClientProvider);
  return ProductRepository(client);
}

// Provider with parameter: product by ID
@riverpod
Future<Product> product(Ref ref, String productId) async {
  final repository = ref.watch(productRepositoryProvider);
  return repository.getProduct(productId);
}

// Derived provider: filtered products
@riverpod
List<Product> filteredProducts(Ref ref) {
  final products = ref.watch(productsProvider).valueOrNull ?? [];
  final filter = ref.watch(productFilterProvider);

  return products.where((p) => p.category == filter.category).toList();
}

// Usage with parameter
class ProductDetailScreen extends ConsumerWidget {
  final String productId;

  const ProductDetailScreen({super.key, required this.productId});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // family allows passing parameters
    final productAsync = ref.watch(productProvider(productId));

    return productAsync.when(
      loading: () => const ProductSkeleton(),
      error: (e, _) => ErrorWidget(error: e),
      data: (product) => ProductDetails(product: product),
    );
  }
}

BLoC 컴포지션

composition_bloc.dartdart
// Repository injected into the Bloc
class ProductBloc extends Bloc<ProductEvent, ProductState> {
  final ProductRepository _repository;
  final CartBloc _cartBloc;
  late final StreamSubscription _cartSubscription;

  ProductBloc({
    required ProductRepository repository,
    required CartBloc cartBloc,
  })  : _repository = repository,
        _cartBloc = cartBloc,
        super(ProductInitial()) {
    on<ProductFetchRequested>(_onFetchRequested);
    on<ProductAddedToCart>(_onAddedToCart);

    // Listen to cart changes
    _cartSubscription = _cartBloc.stream.listen((cartState) {
      // React to cart changes
      if (cartState is CartUpdated) {
        add(ProductCartSyncRequested(cartState.items));
      }
    });
  }

  Future<void> _onFetchRequested(
    ProductFetchRequested event,
    Emitter<ProductState> emit,
  ) async {
    emit(ProductLoading());
    try {
      final product = await _repository.getProduct(event.productId);
      // Check if product is in cart
      final isInCart = _cartBloc.state.contains(product.id);
      emit(ProductLoaded(product, isInCart: isInCart));
    } catch (e) {
      emit(ProductError(e.toString()));
    }
  }

  @override
  Future<void> close() {
    _cartSubscription.cancel();
    return super.close();
  }
}

// Configuration with dependency injection
class ProductsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => ProductBloc(
        repository: context.read<ProductRepository>(),
        cartBloc: context.read<CartBloc>(),
      )..add(ProductFetchRequested()),
      child: const ProductsView(),
    );
  }
}

Riverpod는 의존성을 선언적으로 관리합니다. BLoC는 Bloc 사이의 구독을 수동으로 관리해야 합니다.

테스트 용이성과 모킹

테스트는 전문 프로젝트에서 결정적인 평가 기준입니다. 두 솔루션 모두 서로 다른 접근으로 이 영역에서 뛰어납니다. 테스트 기술은 Flutter 면접에서 자주 평가됩니다.

Riverpod 테스트

test_riverpod.dartdart
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:mocktail/mocktail.dart';

class MockUserRepository extends Mock implements UserRepository {}

void main() {
  group('UserProvider Tests', () {
    late MockUserRepository mockRepository;

    setUp(() {
      mockRepository = MockUserRepository();
    });

    test('returns users from repository', () async {
      // Arrange
      final expectedUsers = [User(id: '1', name: 'Test')];
      when(() => mockRepository.fetchUsers())
          .thenAnswer((_) async => expectedUsers);

      // ProviderContainer.test auto-disposes after test
      final container = ProviderContainer.test(
        overrides: [
          userRepositoryProvider.overrideWithValue(mockRepository),
        ],
      );

      // Act
      final users = await container.read(usersProvider.future);

      // Assert
      expect(users, expectedUsers);
      verify(() => mockRepository.fetchUsers()).called(1);
    });

    test('handles repository errors', () async {
      when(() => mockRepository.fetchUsers())
          .thenThrow(Exception('Network error'));

      final container = ProviderContainer.test(
        overrides: [
          userRepositoryProvider.overrideWithValue(mockRepository),
        ],
      );

      expect(
        () => container.read(usersProvider.future),
        throwsException,
      );
    });
  });
}

BLoC 테스트

test_bloc.dartdart
import 'package:bloc_test/bloc_test.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:mocktail/mocktail.dart';

class MockUserRepository extends Mock implements UserRepository {}

void main() {
  group('UsersBloc Tests', () {
    late MockUserRepository mockRepository;

    setUp(() {
      mockRepository = MockUserRepository();
    });

    // blocTest simplifies state sequence testing
    blocTest<UsersBloc, UsersState>(
      'emits [Loading, Loaded] when fetch succeeds',
      build: () {
        when(() => mockRepository.fetchUsers())
            .thenAnswer((_) async => [User(id: '1', name: 'Test')]);
        return UsersBloc(mockRepository);
      },
      act: (bloc) => bloc.add(UsersFetchRequested()),
      expect: () => [
        isA<UsersLoading>(),
        isA<UsersLoaded>().having(
          (s) => s.users.length,
          'users count',
          1,
        ),
      ],
    );

    blocTest<UsersBloc, UsersState>(
      'emits [Loading, Error] when fetch fails',
      build: () {
        when(() => mockRepository.fetchUsers())
            .thenThrow(Exception('Network error'));
        return UsersBloc(mockRepository);
      },
      act: (bloc) => bloc.add(UsersFetchRequested()),
      expect: () => [
        isA<UsersLoading>(),
        isA<UsersError>(),
      ],
    );
  });
}

bloc_test 패키지는 상태 시퀀스 테스트를 위한 전용 문법을 제공합니다. Riverpod 3.x는 자동 폐기를 위한 ProviderContainer.test()와 build 메서드만 모킹하기 위한 NotifierProvider.overrideWithBuild()를 추가했습니다.

테스트 커버리지

정상 케이스만 테스트하는 것은 충분하지 않습니다. 테스트는 네트워크 오류, 타임아웃, 경계 상태, 예기치 않은 상태 전이를 포괄해야 합니다. 종합적인 테스트 관행은 Flutter 테스트 가이드를 참조하십시오.

성능과 리빌드 최적화

성능은 사용자 경험에 직접 영향을 미칩니다. 두 솔루션 모두 서로 다른 최적화 메커니즘을 제공합니다.

Riverpod 최적화

perf_riverpod.dartdart
// select to rebuild only if targeted value changes
class UserNameWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // Rebuilds only if user.name changes
    final name = ref.watch(userProvider.select((user) => user.name));
    return Text(name);
  }
}

// Provider with automatic caching
@riverpod
ExpensiveResult expensiveComputation(Ref ref) {
  final input = ref.watch(inputProvider);
  // Computation automatically cached
  return performExpensiveComputation(input);
}

// keepAlive with timer for temporary caching
@riverpod
Future<List<Product>> searchResults(Ref ref, String query) async {
  // Temporary keepAlive during typing
  final link = ref.keepAlive();

  // Timer to release after inactivity
  final timer = Timer(const Duration(seconds: 30), link.close);
  ref.onDispose(timer.cancel);

  return searchProducts(query);
}

BLoC 최적화

perf_bloc.dartdart
// buildWhen limits rebuilds conditionally
class UserNameWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<UserBloc, UserState>(
      // Rebuilds only if name changes
      buildWhen: (previous, current) {
        if (previous is UserLoaded && current is UserLoaded) {
          return previous.user.name != current.user.name;
        }
        return true;
      },
      builder: (context, state) {
        if (state is UserLoaded) {
          return Text(state.user.name);
        }
        return const SizedBox.shrink();
      },
    );
  }
}

// BlocSelector to extract a specific value
class UserAvatarWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocSelector<UserBloc, UserState, String?>(
      // Select only the avatar URL
      selector: (state) => state is UserLoaded ? state.user.avatarUrl : null,
      builder: (context, avatarUrl) {
        if (avatarUrl == null) return const DefaultAvatar();
        return NetworkImage(avatarUrl);
      },
    );
  }
}

두 솔루션 모두 세밀한 최적화를 제공합니다. Riverpod는 select로, BLoC는 buildWhen과 BlocSelector로 처리합니다. 고급 성능 기법은 Flutter 성능 최적화 가이드를 참조하십시오.

실용 사례: 완전한 인증

인증 시스템은 각 솔루션의 실제 패턴을 보여줍니다. 이 사례는 영속 상태, API 호출, 내비게이션을 결합합니다.

Riverpod 인증

auth_riverpod.dartdart
// Authentication state with sealed class
sealed class AuthState {
  const AuthState();
}
final class AuthInitial extends AuthState {
  const AuthInitial();
}
final class AuthLoading extends AuthState {
  const AuthLoading();
}
final class AuthAuthenticated extends AuthState {
  final User user;
  const AuthAuthenticated(this.user);
}
final class AuthUnauthenticated extends AuthState {
  final String? error;
  const AuthUnauthenticated([this.error]);
}

// Notifier to manage auth state
@riverpod
class Auth extends _$Auth {
  @override
  Future<AuthState> build() async {
    final storage = ref.watch(secureStorageProvider);
    final repository = ref.watch(authRepositoryProvider);
    
    final token = await storage.getToken();
    if (token != null) {
      try {
        final user = await repository.getCurrentUser(token);
        return AuthAuthenticated(user);
      } catch (_) {
        await storage.deleteToken();
        return const AuthUnauthenticated();
      }
    }
    return const AuthUnauthenticated();
  }

  Future<void> login(String email, String password) async {
    state = const AsyncLoading();
    final repository = ref.read(authRepositoryProvider);
    final storage = ref.read(secureStorageProvider);
    
    try {
      final result = await repository.login(email, password);
      await storage.saveToken(result.token);
      state = AsyncData(AuthAuthenticated(result.user));
    } catch (e) {
      state = AsyncData(AuthUnauthenticated(e.toString()));
    }
  }

  Future<void> logout() async {
    final storage = ref.read(secureStorageProvider);
    await storage.deleteToken();
    state = const AsyncData(AuthUnauthenticated());
  }
}

// Redirect based on auth state
@riverpod
GoRouter router(Ref ref) {
  final authState = ref.watch(authProvider);

  return GoRouter(
    redirect: (context, state) {
      final isAuth = authState.valueOrNull is AuthAuthenticated;
      final isAuthRoute = state.matchedLocation.startsWith('/auth');

      if (!isAuth && !isAuthRoute) return '/auth/login';
      if (isAuth && isAuthRoute) return '/home';
      return null;
    },
    routes: [...],
  );
}

BLoC 인증

auth_bloc.dartdart
// Exhaustive states for authentication
sealed class AuthState {
  const AuthState();
}
final class AuthInitial extends AuthState {
  const AuthInitial();
}
final class AuthCheckInProgress extends AuthState {
  const AuthCheckInProgress();
}
final class AuthLoginInProgress extends AuthState {
  const AuthLoginInProgress();
}
final class AuthSuccess extends AuthState {
  final User user;
  const AuthSuccess(this.user);
}
final class AuthFailure extends AuthState {
  final String error;
  const AuthFailure(this.error);
}
final class AuthLoggedOut extends AuthState {
  const AuthLoggedOut();
}

// Authentication events
sealed class AuthEvent {
  const AuthEvent();
}
final class AuthCheckRequested extends AuthEvent {
  const AuthCheckRequested();
}
final class AuthLoginSubmitted extends AuthEvent {
  final String email;
  final String password;
  const AuthLoginSubmitted(this.email, this.password);
}
final class AuthLogoutRequested extends AuthEvent {
  const AuthLogoutRequested();
}

class AuthBloc extends Bloc<AuthEvent, AuthState> {
  final AuthRepository _repository;
  final SecureStorage _storage;

  AuthBloc({
    required AuthRepository repository,
    required SecureStorage storage,
  })  : _repository = repository,
        _storage = storage,
        super(const AuthInitial()) {
    on<AuthCheckRequested>(_onCheckRequested);
    on<AuthLoginSubmitted>(_onLoginSubmitted);
    on<AuthLogoutRequested>(_onLogoutRequested);
  }

  Future<void> _onCheckRequested(
    AuthCheckRequested event,
    Emitter<AuthState> emit,
  ) async {
    emit(const AuthCheckInProgress());
    final token = await _storage.getToken();

    if (token == null) {
      emit(const AuthLoggedOut());
      return;
    }

    try {
      final user = await _repository.getCurrentUser(token);
      emit(AuthSuccess(user));
    } catch (_) {
      await _storage.deleteToken();
      emit(const AuthLoggedOut());
    }
  }

  Future<void> _onLoginSubmitted(
    AuthLoginSubmitted event,
    Emitter<AuthState> emit,
  ) async {
    emit(const AuthLoginInProgress());
    try {
      final result = await _repository.login(event.email, event.password);
      await _storage.saveToken(result.token);
      emit(AuthSuccess(result.user));
    } catch (e) {
      emit(AuthFailure(e.toString()));
    }
  }

  Future<void> _onLogoutRequested(
    AuthLogoutRequested event,
    Emitter<AuthState> emit,
  ) async {
    await _storage.deleteToken();
    emit(const AuthLoggedOut());
  }
}

두 구현은 동일한 기능을 서로 다른 방식으로 다룹니다. BLoC는 각 전이를 명시하고, Riverpod는 문법을 단순화합니다.

비교 요약 표

기준Riverpod 3.xBLoC 9.x
학습 곡선보통더 가파름
보일러플레이트최소 (코드 생성 사용 시)많음
타입 안전성우수우수
테스트 용이성우수우수
자동 재시도내장수동 구현
오프라인 영속화실험적 지원외부 패키지
추적성DevTools 경유명시적 Events/States
컴포지션자동수동
코드 생성권장불필요
팀 규모유연대규모 팀

상황별 권장 사항

Riverpod와 BLoC의 선택은 여러 상황적 요인에 따라 달라집니다.

Riverpod를 선택하는 경우:

  • 팀이 간결성과 생산성을 우선시함
  • 프로젝트가 유연한 상태 컴포지션을 요구함
  • 개발자가 React 또는 다른 반응형 프레임워크 출신
  • 자동 재시도와 오류 복구가 중요함
  • 오프라인 영속화가 요구사항임

BLoC를 선택하는 경우:

  • 팀이 엄격하고 예측 가능한 패턴을 선호함
  • 프로젝트가 감사를 위한 완전한 이벤트 추적을 요구함
  • 주니어가 강제된 아키텍처에서 이점을 얻음
  • 디버깅에 상세한 전이 이력이 필요함
  • 업계가 감사 추적을 요구함 (핀테크, 의료)

소스

2026년 Riverpod vs BLoC에서 기억할 점

Riverpod와 BLoC는 Flutter의 상태 관리 요구를 효과적으로 충족합니다. Riverpod 3.x는 사용성, 자동 오류 처리, 유연한 컴포지션에서 뛰어납니다. BLoC 9.x는 구조, 예측 가능성, 엔터프라이즈급 추적성에서 앞섭니다. 두 솔루션 모두 우수한 테스트 용이성과 최적의 성능을 제공합니다.

결정 체크리스트

  • 팀의 규모와 경험을 평가
  • 데이터 흐름의 복잡도를 고려
  • 추적성과 디버깅 요구사항을 분석
  • 두 솔루션을 프로토타입에서 시험
  • 기존 아키텍처와의 일관성을 확인

연습을 시작하세요!

면접 시뮬레이터와 기술 테스트로 지식을 테스트하세요.

무료 계정 만들기

최선의 선택은 팀이 숙련되어 있고 효과적으로 유지보수할 수 있는 솔루션입니다. 적용의 일관성이 솔루션 자체의 선택보다 우선합니다. Isolate 및 동시성과 같은 Dart 고유 패턴은 Dart Isolate 및 동시성 가이드를 참조하십시오.

오늘의 챌린지

Flutter 코드의 버그를 찾을 수 있나요

실제 코드 한 조각, 숨은 버그 하나, 하루 한 번. 계정 없이 바로 도전할 수 있습니다.

도전하기
Anthony Fillion-Maillet

작성자

Anthony Fillion-Maillet

SharpSkill 창업자

10년 이상 풀스택 개발을 해왔습니다. SharpSkill을 운영하며 이곳에 게시되는 모든 내용에 책임을 집니다.

2026년 8월 21일 업데이트

태그

#flutter
#riverpod
#bloc
#state management
#dart

공유

관련 기사

Flutter 상태 관리 2026: Riverpod, Bloc, GetX 비교 다이어그램

2026년 Flutter 상태 관리 완벽 가이드: Riverpod vs Bloc vs GetX 비교 분석

Riverpod 3.4, Bloc 9.1, GetX 세 가지 Flutter 상태 관리 솔루션을 코드 예제, 성능 분석, 테스트 전략 관점에서 비교 분석합니다.

모바일 개발자를 위한 Flutter 면접 질문 가이드

모바일 개발자를 위한 Flutter 면접 질문 20선

Flutter 면접에서 가장 자주 출제되는 20가지 질문을 준비하십시오. Widget, 상태 관리, Dart, 아키텍처, 모범 사례를 상세한 코드 예제와 함께 설명합니다.

Flutter와 Dart로 첫 번째 모바일 애플리케이션을 구축하는 가이드

Flutter: 첫 번째 크로스 플랫폼 앱 구축하기

Flutter와 Dart를 사용한 크로스 플랫폼 모바일 애플리케이션 구축 완전 가이드. Widget, 상태 관리, 내비게이션, 초보자를 위한 모범 사례를 다룹니다.