BlocBuilder

在UI里根据state的变化显示不同的内容(BlocBuilder):

BlocBuilder란?

BlocBuilder는 Bloc 패턴의 핵심 위젯 중 하나로, Bloc 또는 Cubit으로부터 발생하는 상태 변화에 반응하여 UI를 업데이트하는 데 사용됩니다. BlocBuilder는 주어진 Bloc 또는 Cubit의 상태에 따라 조건부로 위젯을 빌드합니다.

사용 방법

BlocBuilder<BlocType, BlocState>(
  builder: (context, state) {
    if (state is SpecificState) {
      return WidgetForSpecificState();
    } else {
      return OtherWidget();
    }
  },
)

  • BlocType: 관찰하고자 하는 Bloc 또는 Cubit의 타입입니다.
  • BlocState: 해당 Bloc 또는 Cubit에서 관리하는 상태(state)의 타입입니다.
  • builder: 상태 변화에 따라 UI를 어떻게 빌드할 것인지 정의하는 함수입니다. 이 함수는 contextstate를 매개변수로 받습니다.

특징

  • 반응형 프로그래밍: BlocBuilder는 Bloc 또는 Cubit의 상태가 변경될 때마다 builder 함수를 호출하여 UI를 재구성합니다.
  • 상태 분리: UI를 상태 변화에 따라 업데이트하는 로직을 분리하여, 각 위젯이 상태 관리 로직에 직접적으로 의존하지 않게 합니다.
  • 효율적인 렌더링: Bloc 또는 Cubit의 상태가 실제로 변경되었을 때만 위젯 트리를 다시 빌드합니다.

주의 사항

  • BlocBuilder는 상태 변화에만 반응합니다. 사용자의 인터랙션과 같은 이벤트 처리는 BlocListener 또는 BlocConsumer를 사용할 수 있습니다.
  • Bloc 패턴을 사용하기 위해서는 flutter_bloc 패키지를 의존성에 추가하고, 적절한 Bloc 또는 Cubit을 구현해야 합니다.

buildWhen

buildWhen은 Flutter에서 Bloc 또는 Cubit 패턴을 사용할 때, 특정 조건에서만 위젯을 재구성(rebuild)하도록 설정하는 함수입니다. 주로 BlocBuilder 또는 BlocConsumer와 함께 사용되며, 모든 상태 변화에 대해 UI를 재구성하는 대신, 특정 조건을 만족할 때만 UI를 업데이트합니다.

사용 방법

buildWhen 함수는 이전 상태와 현재 상태를 매개변수로 받고, 위젯이 재구성될 조건을 반환하는 부울 식을 정의합니다.

BlocBuilder<BlocType, BlocState>(
  builder: (context, state) {
    // UI 구성
  },
  buildWhen: (previousState, currentState) {
    // 위젯이 재구성될 조건
    return true or false;
  },
)

  • BlocType: 감시하고자 하는 Bloc 또는 Cubit의 타입입니다.
  • BlocState: 해당 Bloc 또는 Cubit의 상태 타입입니다.
  • builder: 상태 변화에 따라 UI를 어떻게 빌드할 것인지 정의하는 함수입니다.
  • buildWhen: 위젯이 재구성될 조건을 정의하는 함수입니다.

예시

BlocBuilder<CounterBloc, CounterState>(
  builder: (context, state) {
    return Text('Count: ${state.count}');
  },
  buildWhen: (previousState, currentState) {
    // 카운트 값이 변경되었을 때만 위젯 재구성
    return previousState.count != currentState.count;
  },
)

이 예시에서 buildWhen은 카운트 값이 변경될 때만 Text 위젯을 재구성하도록 조건을 설정합니다.

주의 사항

  • buildWhen을 사용할 때는 위젯이 재구성될 정확한 조건을 명확하게 정의해야 합니다.
  • 모든 상태 변화에 대해 UI를 재구성하고 싶지 않을 때 buildWhen을 사용하면 효과적입니다.
  • buildWhen은 UI의 재구성을 결정하지만, 상태 변화에 따른 부수 효과는 처리하지 않습니다. 부수 효과 처리가 필요하다면 BlocListener 또는 BlocConsumerlistenWhen을 사용하세요.
  • buildWhenflutter_bloc 패키지의 일부이므로, 이를 사용하기 위해서는 해당 패키지를 프로젝트에 추가해야 합니다.
Last Updated:
Contributors: RiGang