이번 포스트에서는 Flutter 애플리케이션에서 BLoC 패턴을 사용하여 로딩 상태를 효과적으로 표시하는 방법에 대해 알아보겠습니다.

BLoC 패턴 소개

BLoC는 Business Logic Component의 약자로, Flutter 애플리케이션에서 비즈니스 로직과 UI를 분리하기 위해 사용되는 디자인 패턴입니다. BLoC 패턴을 사용하면 UI 요소와 비즈니스 로직의 결합을 피하고, 코드 재사용성과 테스트 용이성을 높일 수 있습니다.

로딩 상태 표시하기

먼저, BLoC 패턴을 이용하여 데이터를 가져오는 동안 로딩 상태를 표시하는 방법에 대해 알아보겠습니다.

class MyBloc {
  final _loadingSubject = BehaviorSubject<bool>.seeded(false);
  Stream<bool> get loading => _loadingSubject.stream;

  Future<void> fetchData() async {
    _loadingSubject.add(true);
    try {
      // 데이터 가져오는 비동기 작업 수행
      // 예: await api.fetchData();
    } finally {
      _loadingSubject.add(false);
    }
  }
}

위의 예제에서, fetchData 메서드는 데이터를 가져오는 동안 로딩 상태를 표시하는 로직을 포함하고 있습니다. 비동기 작업을 수행하기 전에 _loadingSubject를 true로 설정하고, 작업이 완료되면 다시 false로 설정합니다.

이제 UI에서 이 로딩 상태를 구독하여 표시할 수 있습니다.

StreamBuilder<bool>(
  stream: myBloc.loading,
  builder: (context, snapshot) {
    if (snapshot.hasData && snapshot.data) {
      return CircularProgressIndicator();
    } else {
      return Container(); // 로딩 상태가 아닐 때 표시할 UI
    }
  },
)

위의 예제에서, StreamBuilder를 사용하여 myBloc.loading 스트림을 구독하고, 데이터가 true이면 CircularProgressIndicator를, 그렇지 않으면 다른 UI를 표시합니다.

결론

Flutter에서 BLoC 패턴을 사용하여 로딩 상태를 효과적으로 표시하는 방법에 대해 알아보았습니다. BLoC 패턴을 이용하면 UI와 비즈니스 로직 간의 결합을 피하고, 애플리케이션의 유지보수성을 높일 수 있습니다.

참고문헌:

• https://bloclibrary.dev/#/gettingstarted

다음 포스트에서는 BLoC 패턴을 사용하여 에러 상태를 처리하는 방법에 대해 알아보겠습니다.