[Flutter] 상태 관리 라이브러리 Provider 패키지

Provider는 Flutter에서 공식적으로 추천하는 Flutter 상태 관리 라이브러리 중 가장 많이 사용되는 패키지이다.

 

1. Provider란?

Provider는 Flutter의 InheritedWidget을 간편하게 사용하도록 돕는 패키지로 여러 위젯에서 데이터를 공유하고, 상태 변경을 감지하여 UI를 자동으로 업데이트할 수 있다.

✔ Provider를 사용하면 좋은 점

1. 리소스 할당 및 해제 관리가 간딘해짐
   → 불필요한 리소스 사용을 줄이고 메모리 누수를 방지할 수 있음.
2. Lazy-loading 지원
   → 필요할 때까지 객체를 생성하지 않아서 성능 최적화가 가능함.
3. 보일러플레이트 코드 감소
   → 새 클래스를 작성할 때마다 반복되는 코드가 줄어듦.
4. Flutter DevTools와 호환
   → DevTools에서 앱 상태를 시각적의로 확인 가능.
5. 공통된 소비 방법 제공
   → Provider.of, Consumer, Selector 같은 API를 활용할 수 있음.
   
6. 확장성 증가
   → ChangeNotifier 같은 클래스를 사용할 때, 복잡성이 증가하는 걸 막아줌.

 

2. Provider의 사용법

 

2.1. 새로운 객체를 제공할 때(create 사용)

Provider는 단순히 값을 노출하는 것뿐만 아니라, 객체를 생성하고, 관리하고, 해제할 수도 있다.

(🚨 주의! create가 아닌 .value를 사용해서 객체를 생성하면 예상치 못한 문제가 발생할 수 있음)

Provider(
  create: (_) => MyModel(), // 새로운 객체를 생성
  child: MyApp(),
);

 

2.2. 기존 객체를 재사용할 때 (value 사용)

이미 만들어진 객체를 Provider를 통해 전달하려면 .value를 사용해야 한다.

final myModel = MyModel();

ChangeNotifierProvider.value(
  value: myModel, // 기존 객체를 전달할 때는 .value 사용!
  child: MyApp(),
);

 

3. Provider에서 값 읽기

3.1. context.watch<T>() → UI 자동 업데이트

• 상태를 감지하고 변경될 때마다 UI를 자동으로 업데이트함.
• build() 함수 내부에서만 사용할 수 있음.

Text(
  context.watch<String>(), // 값이 변경되면 UI 자동 업데이트
);

 

3.2. context.read<T>() → 값 가져오기 (UI 변경 없음)

• 단순히 값을 한 번 가져오고, UI 업데이트 없이 사용할 때 적합.
• build() 함수 외부에서도 사용할 수 있음.

ElevatedButton(
  onPressed: () {
    print(context.read<Counter>().count); // 상태를 읽기만 함 (UI 변경 X)
  },
  child: Text("Print Count"),
);

 

3.3. context.select<T, R>(R cb(T value)) → 특정 값만 감지

• 객체의 일부 값만 감지하고 UI를 업데이트하고 싶을 때 사용.

final name = context.select((Person p) => p.name); // name이 변경될 때만 UI 업데이트
return Text(name);

 

4. MultiProvider 사용법

Provider를 여러 개 중첩해서 사용할 경우 MultiProvider를 사용하면 더 깔끔하게 관리할 수 있다.

MultiProvider(
  providers: [
    Provider<Something>(create: (_) => Something()),
    Provider<SomethingElse>(create: (_) => SomethingElse()),
  ],
  child: MyApp(),
);

 

5. ProxyProvider 사용법

ProxyProvider는 다른 Provider의 값을 기반으로 새로운 객체를 생성할 때 사용한다.

📌 장점

• Counter가 변경될 때마다 Translations 객체도 자동으로 업데이트됨.
• 상태 간의 의존성을 설정할 때 유용함.

Widget build(BuildContext context) {
  return MultiProvider(
    providers: [
      ChangeNotifierProvider(create: (_) => Counter()),
      ProxyProvider<Counter, Translations>(
        update: (_, counter, __) => Translations(counter.count),
      ),
    ],
    child: Foo(),
  );
}

class Translations {
  final int count;
  Translations(this.count);

  String get title => 'You clicked $count times';
}