플러터] Provider의 Consumer

플러터의 상태 관리로 사용되는 Provider가 제공하는 Consumer에 대해서 알아보자.

 

Consumer는 Provider 패키지가 제공하는 위젯 중 하나이다. 특정 상태에 대한 구독을 설정하여 해당 상태의 변경 사항을 감지하고, 이에 따라 자동으로 위젯을 업데이트할 수 있게 도와준다. 따라서 Consumer는 필요한 부분만을 업데이트하고 성능을 최적화하는 데 사용한다.

 

Consumer는 다음과 같은 형태로 사용된다.

Consumer<T>(
  builder: (BuildContext context, T value, Widget? child) {
    // T 상태가 변경될 때마다 builder가 호출된다.
    return YourWidget();
  },
)

 

Consumer는 상태 T를 구독하고, 상태가 변경될 때마다 builder 함수를 호출하여 위젯을 빌드한다. builder 함수는 BuildContext와 현재 T상태를 value와 선택적인 child 위젯을 매개변수로 받는다. (child는 조금 뒤에 다시 자세히 설명하겠다.) builder 함수 내에서는 현재 상태 값에 기반하여 위젯을 구성하고 반환하면 된다. 이렇게 Consumer를 사용하면 위젯 전체를 리빌드하지 않고, 상태를 참조하는 일부 위젯만 빌드할 수 있게 된다. 

 

다음은 Counter 상태를 구독하고 해당 값에 따라 텍스트를 표시하는 간단한 예제이다.

Consumer<Counter>(
  builder: (context, counter, child) {
    return Text('Count: ${counter.count}');
  },
)

 

Consumer의 builder 함수는 상태 변경시 위젯을 업데이트하는 데 사용되는데, 때로는 builder 함수의 child 매개변수를 사용하여 이전에 구성된 위젯을 전달할 수 있다. 이렇게 하면 이전에 생성된 위젯을 재사용할 수 있으므로 불필요한 위젯 재생성을 방지하여 성능을 향상할 수 있다.

 

예를 들어 다음과 같이 builder에 Counter와 관련이 없는 Text 위젯이 포함되어 있다고 가정해보자.

Consumer<Counter>(
  builder: (context, counter, child) {
    return Column(
      children: [
        Text('Count: ${counter.count}'),
        Text('Additional Widget'),
      ],
    );
  },
)

 

Column에는 2개의 Text 위젯을 가지는데, 두 번째 Text 위젯은 Counter와 관련이 없기 때문에 불필요한 빌드가 발생하게 된다. 이런 경우에 child가 사용된다. 재사용할 위젯을 Consumer()의 child 매개변수에 전달하고, builder에서 child를 이용해 위젯을 만들면 된다.

Consumer<Counter>(
  builder: (context, counter, child) {
    return Column(
      children: [
        Text('Count: ${counter.count}'),
        child!,
      ],
    );
  },
  child: Text('Additional Widget'),
)

 

 

이렇게 만들어진 Consmer는 Counter 상태가 변경될 때마다 child를 재사용하기 때문에 불필요한 위젯 생성을 피하고 성능을 최적화할 수 있게 된다.