Flutter 프로젝트에 Provider 패턴 도입하기

문제 상황

회사에서 Flutter로 신규 모바일 앱을 개발하던 중, 위젯 트리가 깊어지면서 setState로 상태를 관리하는 것이 한계에 부딪혔다. 여러 화면에서 공유해야 하는 사용자 정보와 장바구니 데이터를 props로 계속 내려주다 보니 코드가 복잡해졌다.

Provider 선택 이유

BLoC, Redux, Provider를 비교 검토했다. BLoC은 러닝커브가 높았고, Redux는 보일러플레이트가 많았다. Provider는 Flutter 팀이 공식 추천하는 방식이고, 코드가 간결해서 선택했다.

적용 과정

먼저 pubspec.yaml에 provider 패키지를 추가했다.

dependencies:
  provider: ^3.1.0

사용자 정보를 관리하는 ChangeNotifier를 작성했다.

class UserProvider extends ChangeNotifier {
  User _user;

  User get user => _user;

  void setUser(User user) {
    _user = user;
    notifyListeners();
  }

  void logout() {
    _user = null;
    notifyListeners();
  }
}

Main.dart에서 MultiProvider로 감싸서 전역 상태로 제공했다.

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => UserProvider()),
        ChangeNotifierProvider(create: (_) => CartProvider()),
      ],
      child: MyApp(),
    ),
  );
}

각 화면에서는 Consumer나 Provider.of로 상태를 구독했다.

Consumer<UserProvider>(builder: (context, userProvider, child) {
  return Text(userProvider.user?.name ?? '로그인 필요');
})

결과

위젯 간 props drilling이 사라지고 코드가 훨씬 깔끔해졌다. 상태 변경 로직도 Provider 클래스에 집중되어 유지보수가 편해졌다. 다만 Provider가 많아지면 의존성 관리가 복잡해질 수 있다는 점은 주의해야 할 것 같다.