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

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

- Published: 2026-02-14
- Updated: 2026-04-28
- Author: SharpSkill
- Tags: flutter, riverpod, bloc, state management, dart
- Reading time: 12 min

---

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

> **전제 조건**
>
> 본 가이드는 Flutter와 상태 관리 기초에 대한 이해를 전제합니다. 예제는 현재 안정 버전인 Riverpod 2.x와 flutter_bloc 8.x를 사용합니다.

## 두 접근 방식의 핵심 철학

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

**Riverpod**는 선언적이고 반응형 접근을 채택합니다. provider가 widget이 관찰하는 데이터 소스를 정의합니다. 프레임워크가 생명주기, 캐싱, provider 간 의존성을 자동으로 관리합니다.

**BLoC**(Business Logic Component)는 이벤트 기반의 엄격한 아키텍처를 강제합니다. 컴포넌트가 이벤트를 발행하고, Bloc이 이를 처리해 새로운 상태를 생성합니다. 이 명시적인 분리가 데이터 흐름의 추적을 용이하게 합니다.

```dart
// riverpod_philosophy.dart
// Riverpod: simple declaration, framework handles the rest
final counterProvider = StateProvider<int>((ref) => 0);

// 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');
  }
}
```

```dart
// bloc_philosophy.dart
// BLoC: explicit events/states separation
abstract class CounterEvent {}
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'),
    );
  }
}
```

두 접근 방식 중 어느 쪽을 선택할지는 팀의 선호와 프로젝트 제약에 따라 달라집니다.

## 초기 설정

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

### Riverpod 설치

Riverpod는 단일 패키지와 애플리케이션 루트의 wrapper만 필요합니다. 선택적 코드 생성이 생산성을 높여 줍니다.

```dart
// main.dart
// 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를 두는 더 정교한 설정이 필요합니다.

```dart
// main.dart
// 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 카운터

```dart
// counter_riverpod.dart
// StateProvider: simple state without complex logic
final counterProvider = StateProvider<int>((ref) => 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).state++,
        child: const Icon(Icons.add),
      ),
    );
  }
}
```

### BLoC 카운터

```dart
// counter_bloc.dart
// Typed events for each possible action
sealed class CounterEvent {}
class CounterIncremented extends CounterEvent {}
class CounterDecremented extends CounterEvent {}
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의 가치가 드러납니다.

> **StateProvider vs StateNotifierProvider**
>
> StateProvider는 단순한 원시 값에 적합합니다. 복잡한 객체나 비즈니스 로직에는 StateNotifierProvider 또는 NotifierProvider가 더 많은 제어를 제공합니다.

## 비동기 상태 관리: API 호출

비동기 작업은 각 솔루션의 강점을 드러냅니다. loading, error, data 상태의 관리가 핵심 과제입니다.

### Riverpod 비동기 데이터

```dart
// async_riverpod.dart
// FutureProvider: automatic loading/error/data management
final usersProvider = FutureProvider.autoDispose<List<User>>((ref) async {
  final repository = ref.watch(userRepositoryProvider);
  // autoDispose releases resources when provider is no longer used
  return repository.fetchUsers();
});

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 비동기 데이터

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

// Events to trigger actions
sealed class UsersEvent {}
class UsersFetchRequested extends UsersEvent {}
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()));
      }
    }
  }
}
```

```dart
// users_screen_bloc.dart
// 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() => const Center(
              child: ElevatedButton(
                onPressed: _fetchUsers,
                child: 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]),
            ),
        };
      },
    );
  }

  void _fetchUsers(BuildContext context) {
    context.read<UsersBloc>().add(UsersFetchRequested());
  }
}
```

BLoC는 각 상태 전이를 세밀하게 제어합니다. Riverpod는 AsyncValue를 통해 더 많은 부분을 자동화합니다.

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

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

### Riverpod 컴포지션

```dart
// composition_riverpod.dart
// Base provider: configuration
final apiClientProvider = Provider<ApiClient>((ref) {
  final baseUrl = ref.watch(environmentProvider).apiUrl;
  return ApiClient(baseUrl: baseUrl);
});

// Dependent provider: repository
final productRepositoryProvider = Provider<ProductRepository>((ref) {
  // Automatic client injection
  final client = ref.watch(apiClientProvider);
  return ProductRepository(client);
});

// Provider with parameter: product by ID
final productProvider = FutureProvider.autoDispose.family<Product, String>(
  (ref, productId) async {
    final repository = ref.watch(productRepositoryProvider);
    return repository.getProduct(productId);
  },
);

// Derived provider: filtered products
final filteredProductsProvider = Provider<List<Product>>((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 컴포지션

```dart
// composition_bloc.dart
// 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 사이의 구독을 수동으로 관리해야 합니다.

## 테스트 용이성과 모킹

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

### Riverpod 테스트

```dart
// test_riverpod.dart
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;
    late ProviderContainer container;

    setUp(() {
      mockRepository = MockUserRepository();
      // Isolated container with override
      container = ProviderContainer(
        overrides: [
          userRepositoryProvider.overrideWithValue(mockRepository),
        ],
      );
    });

    tearDown(() => container.dispose());

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

      // 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'));

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

### BLoC 테스트

```dart
// test_bloc.dart
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는 표준 Flutter 테스트 패턴을 사용합니다.

> **테스트 커버리지**
>
> 정상 케이스만 테스트하는 것은 충분하지 않습니다. 테스트는 네트워크 오류, 타임아웃, 경계 상태, 예기치 않은 상태 전이를 포괄해야 합니다.

## 성능과 리빌드 최적화

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

### Riverpod 최적화

```dart
// perf_riverpod.dart
// 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
final expensiveComputationProvider = Provider<ExpensiveResult>((ref) {
  final input = ref.watch(inputProvider);
  // Computation automatically cached
  return performExpensiveComputation(input);
});

// autoDispose to release unused resources
final searchResultsProvider = FutureProvider.autoDispose
    .family<List<Product>, String>((ref, 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 최적화

```dart
// perf_bloc.dart
// 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`로 처리합니다.

## 실용 사례: 완전한 인증

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

### Riverpod 인증

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

// Notifier to manage auth state
class AuthNotifier extends StateNotifier<AuthState> {
  final AuthRepository _repository;
  final SecureStorage _storage;

  AuthNotifier(this._repository, this._storage) : super(const AuthInitial()) {
    _checkAuthStatus();
  }

  Future<void> _checkAuthStatus() async {
    final token = await _storage.getToken();
    if (token != null) {
      try {
        final user = await _repository.getCurrentUser(token);
        state = AuthAuthenticated(user);
      } catch (_) {
        await _storage.deleteToken();
        state = const AuthUnauthenticated();
      }
    } else {
      state = const AuthUnauthenticated();
    }
  }

  Future<void> login(String email, String password) async {
    state = const AuthLoading();
    try {
      final result = await _repository.login(email, password);
      await _storage.saveToken(result.token);
      state = AuthAuthenticated(result.user);
    } catch (e) {
      state = AuthUnauthenticated(e.toString());
    }
  }

  Future<void> logout() async {
    await _storage.deleteToken();
    state = const AuthUnauthenticated();
  }
}

// Provider with injected dependencies
final authProvider = StateNotifierProvider<AuthNotifier, AuthState>((ref) {
  return AuthNotifier(
    ref.watch(authRepositoryProvider),
    ref.watch(secureStorageProvider),
  );
});

// Redirect based on auth state
final routerProvider = Provider<GoRouter>((ref) {
  final authState = ref.watch(authProvider);

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

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

### BLoC 인증

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

// Authentication events
sealed class AuthEvent {
  const AuthEvent();
}
class AuthCheckRequested extends AuthEvent {
  const AuthCheckRequested();
}
class AuthLoginSubmitted extends AuthEvent {
  final String email;
  final String password;
  const AuthLoginSubmitted(this.email, this.password);
}
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 | BLoC |
|------|----------|------|
| **학습 곡선** | 보통 | 더 가파름 |
| **보일러플레이트** | 최소 | 많음 |
| **타입 안전성** | 우수 | 우수 |
| **테스트 용이성** | 우수 | 우수 |
| **추적성** | DevTools 경유 | 명시적 Events/States |
| **컴포지션** | 자동 | 수동 |
| **코드 생성** | 선택 사항 | 불필요 |
| **팀 규모** | 유연 | 대규모 팀 |

## 상황별 권장 사항

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

**Riverpod를 선택하는 경우:**
- 팀이 간결성과 생산성을 우선시함
- 프로젝트가 유연한 상태 컴포지션을 요구함
- 개발자가 React 또는 다른 반응형 프레임워크 출신
- 자동 캐싱이 큰 이점이 됨

**BLoC를 선택하는 경우:**
- 팀이 엄격하고 예측 가능한 패턴을 선호함
- 프로젝트가 완전한 이벤트 추적을 요구함
- 주니어가 강제된 아키텍처에서 이점을 얻음
- 디버깅에 전이 이력이 필요함

## 결론

Riverpod와 BLoC는 Flutter의 상태 관리 요구를 효과적으로 충족합니다. Riverpod는 사용성과 유연성에서, BLoC는 구조와 예측 가능성에서 두드러집니다. 두 솔루션 모두 우수한 테스트 용이성과 최적의 성능을 제공합니다.

### 결정 체크리스트

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

최선의 선택은 팀이 숙련되어 있고 효과적으로 유지보수할 수 있는 솔루션입니다. 적용의 일관성이 솔루션 자체의 선택보다 우선합니다.

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ko/blog/flutter/flutter-state-management-riverpod-vs-bloc