Flutter State Management: Riverpod vs Bloc 완전 비교 가이드

Flutter로 모바일 앱을 개발할 때 가장 중요한 결정 중 하나는 상태관리 솔루션을 선택하는 것입니다. 특히 Riverpod과 Bloc은 Flutter 커뮤니티에서 가장 널리 사용되는 두 가지 상태관리 패턴으로, 각각의 고유한 장단점을 가지고 있습니다. 이 글에서는 실전 코드 예제와 함께 두 솔루션을 심층 비교하여 여러분의 프로젝트에 최적의 선택을 도와드리겠습니다.

Riverpod 개요와 핵심 특징

Riverpod은 Provider의 진화된 형태로, 컴파일 타임 안전성과 테스트 용이성을 크게 개선한 상태관리 솔루션입니다. 가장 큰 특징은 BuildContext에 의존하지 않는다는 점입니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';

// Provider 정의
final counterProvider = StateProvider<int>((ref) => 0);

// 비동기 데이터 처리
final userProvider = FutureProvider<User>((ref) async {
  final repository = ref.read(userRepositoryProvider);
  return await repository.getCurrentUser();
});

// 복합 상태 관리
final filteredTodosProvider = Provider<List<Todo>>((ref) {
  final todos = ref.watch(todosProvider);
  final filter = ref.watch(filterProvider);
  
  return todos.where((todo) => filter.matches(todo)).toList();
});

Riverpod의 주요 장점은 다음과 같습니다:

• 컴파일 타임 에러 검출로 런타임 오류 방지
• Provider 간 의존성 관리가 명확하고 직관적
• 테스트 시 Provider 오버라이드가 간단
• Hot Reload 지원이 우수

Bloc 패턴의 구조와 동작 원리

Bloc(Business Logic Component)은 이벤트-상태 기반의 예측 가능한 상태관리 패턴입니다. 명확한 단방향 데이터 흐름을 제공하며, 복잡한 비즈니스 로직을 체계적으로 관리할 수 있습니다.

import 'package:flutter_bloc/flutter_bloc.dart';

// 이벤트 정의
abstract class CounterEvent {}
class Increment extends CounterEvent {}
class Decrement extends CounterEvent {}

// 상태 정의
class CounterState {
  final int count;
  const CounterState({required this.count});
}

// Bloc 구현
class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(const CounterState(count: 0)) {
    on<Increment>((event, emit) {
      emit(CounterState(count: state.count + 1));
    });
    
    on<Decrement>((event, emit) {
      emit(CounterState(count: state.count - 1));
    });
  }
}

// 복잡한 비즈니스 로직 예제
class TodoBloc extends Bloc<TodoEvent, TodoState> {
  final TodoRepository repository;
  
  TodoBloc({required this.repository}) : super(TodoInitial()) {
    on<LoadTodos>(_onLoadTodos);
    on<AddTodo>(_onAddTodo);
    on<UpdateTodo>(_onUpdateTodo);
  }
  
  Future<void> _onLoadTodos(LoadTodos event, Emitter<TodoState> emit) async {
    emit(TodoLoading());
    try {
      final todos = await repository.getTodos();
      emit(TodoLoaded(todos: todos));
    } catch (e) {
      emit(TodoError(message: e.toString()));
    }
  }
}

실전 사용법 비교: 간단한 카운터 앱

두 솔루션의 차이점을 명확히 이해하기 위해 동일한 기능을 구현해보겠습니다.

Riverpod 구현

class CounterApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    
    return Scaffold(
      appBar: AppBar(title: Text('Riverpod Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Count: $count', style: Theme.of(context).textTheme.headlineMedium),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: () => ref.read(counterProvider.notifier).state++,
                  child: Text('+'),
                ),
                ElevatedButton(
                  onPressed: () => ref.read(counterProvider.notifier).state--,
                  child: Text('-'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Bloc 구현

class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => CounterBloc(),
      child: Scaffold(
        appBar: AppBar(title: Text('Bloc Counter')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              BlocBuilder<CounterBloc, CounterState>(
                builder: (context, state) {
                  return Text(
                    'Count: ${state.count}',
                    style: Theme.of(context).textTheme.headlineMedium,
                  );
                },
              ),
              SizedBox(height: 20),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton(
                    onPressed: () => context.read<CounterBloc>().add(Increment()),
                    child: Text('+'),
                  ),
                  ElevatedButton(
                    onPressed: () => context.read<CounterBloc>().add(Decrement()),
                    child: Text('-'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

복잡한 상태관리 시나리오 비교

실제 앱 개발에서는 API 호출, 에러 처리, 로딩 상태 등 복잡한 시나리오를 다뤄야 합니다. 사용자 프로필 관리 기능을 예로 들어 비교해보겠습니다.

Riverpod의 복잡한 상태관리

// 상태 모델
@freezed
class UserState with _$UserState {
  const factory UserState.loading() = UserLoading;
  const factory UserState.data(User user) = UserData;
  const factory UserState.error(String message) = UserError;
}

// StateNotifier 사용
class UserNotifier extends StateNotifier<UserState> {
  final UserRepository _repository;
  
  UserNotifier(this._repository) : super(const UserState.loading()) {
    _loadUser();
  }
  
  Future<void> _loadUser() async {
    try {
      final user = await _repository.getCurrentUser();
      state = UserState.data(user);
    } catch (e) {
      state = UserState.error(e.toString());
    }
  }
  
  Future<void> updateProfile(User updatedUser) async {
    state = const UserState.loading();
    try {
      await _repository.updateUser(updatedUser);
      state = UserState.data(updatedUser);
    } catch (e) {
      state = UserState.error(e.toString());
    }
  }
}

final userProvider = StateNotifierProvider<UserNotifier, UserState>((ref) {
  return UserNotifier(ref.read(userRepositoryProvider));
});

Bloc의 복잡한 상태관리

// 이벤트 정의
abstract class UserEvent {}
class LoadUser extends UserEvent {}
class UpdateUser extends UserEvent {
  final User user;
  UpdateUser(this.user);
}

// 상태 정의
abstract class UserState {}
class UserInitial extends UserState {}
class UserLoading extends UserState {}
class UserLoaded extends UserState {
  final User user;
  UserLoaded(this.user);
}
class UserError extends UserState {
  final String message;
  UserError(this.message);
}

// Bloc 구현
class UserBloc extends Bloc<UserEvent, UserState> {
  final UserRepository repository;
  
  UserBloc({required this.repository}) : super(UserInitial()) {
    on<LoadUser>(_onLoadUser);
    on<UpdateUser>(_onUpdateUser);
  }
  
  Future<void> _onLoadUser(LoadUser event, Emitter<UserState> emit) async {
    emit(UserLoading());
    try {
      final user = await repository.getCurrentUser();
      emit(UserLoaded(user));
    } catch (e) {
      emit(UserError(e.toString()));
    }
  }
}

성능과 메모리 사용량 분석

두 솔루션의 성능 특성을 비교해보면 다음과 같습니다:

특성	Riverpod	Bloc
메모리 사용량	낮음 (자동 dispose)	중간 (수동 관리 필요)
빌드 최적화	우수 (선택적 리빌드)	좋음 (BlocBuilder 사용)
초기화 성능	빠름	보통
복잡한 상태 처리	좋음	우수

테스트 용이성 비교

Riverpod 테스트

void main() {
  testWidgets('Counter increment test', (tester) async {
    await tester.pumpWidget(
      ProviderScope(
        overrides: [
          counterProvider.overrideWith((ref) => StateController(0)),
        ],
        child: MyApp(),
      ),
    );
    
    expect(find.text('0'), findsOneWidget);
    await tester.tap(find.byIcon(Icons.add));
    await tester.pump();
    expect(find.text('1'), findsOneWidget);
  });
}

Bloc 테스트

void main() {
  group('CounterBloc', () {
    late CounterBloc counterBloc;
    
    setUp(() {
      counterBloc = CounterBloc();
    });
    
    blocTest<CounterBloc, CounterState>(
      'emits [CounterState(1)] when Increment is added',
      build: () => counterBloc,
      act: (bloc) => bloc.add(Increment()),
      expect: () => [const CounterState(count: 1)],
    );
  });
}

프로젝트 규모별 선택 가이드

프로젝트의 특성과 규모에 따른 선택 기준은 다음과 같습니다:

소규모 프로젝트 (1-3명, 간단한 CRUD)

• Riverpod 추천: 빠른 개발, 적은 보일러플레이트 코드

중간 규모 프로젝트 (3-7명, 복잡한 비즈니스 로직)

• 둘 다 적합: 팀의 경험과 선호도에 따라 선택

대규모 프로젝트 (7명 이상, 복잡한 상태 흐름)

• Bloc 추천: 명확한 구조, 예측 가능한 상태 변화

크로스플랫폼 개발 시 고려사항:

• React Native 경험이 있다면 Riverpod이 더 친숙할 수 있음
• iOS/Android 네이티브 개발 경험이 많다면 Bloc의 명확한 구조가 유리

마무리

Riverpod과 Bloc은 각각 고유한 장점을 가진 훌륭한 상태관리 솔루션입니다. Riverpod은 간결함과 개발 생산성에 중점을 두고 있으며, Bloc은 구조적 명확성과 복잡한 상태 관리에 강점을 보입니다. 프로젝트의 규모, 팀의 경험, 그리고 요구사항을 종합적으로 고려하여 선택하시기 바랍니다. 두 솔루션 모두 Flutter 생태계에서 검증된 도구이므로, 어떤 선택을 하든 성공적인 모바일 앱 개발이 가능할 것입니다.