[flutter] 플러터에서 bloc 패턴을 사용하여 데이터베이스 캐싱하기

20 Dec 2023

flutter

플러터 앱을 개발할 때 데이터베이스 캐싱은 중요한 부분입니다. 사용자 경험을 향상시키고 앱의 성능을 최적화하는 데 도움이 됩니다. 이를 위해 Bloc(비즈니스 로직 컴포넌트) 패턴을 사용하여 데이터를 캐싱하는 방법을 살펴보겠습니다.

Bloc 패턴 소개

Bloc 패턴은 상태 관리와 비즈니스 로직 분리를 위한 디자인 패턴입니다. 이 패턴을 사용하면 앱의 코드를 조직화하고 유지보수하기 쉽게 만들 수 있습니다.

데이터베이스 캐싱 구현하기

우리의 목표는 Bloc 패턴을 사용하여 데이터를 가져와서 데이터베이스에 캐싱하는 것입니다. 먼저, flutter_bloc 패키지를 사용하여 Bloc을 설정합니다.

dependencies:
  flutter_bloc: ^7.0.0

다음으로, 데이터를 가져오기 위한 Bloc 클래스를 작성합니다.

class DataBloc extends Bloc<DataEvent, DataState> {
  final DataRepository dataRepository;
  
  DataBloc(this.dataRepository) : super(DataInitial());

  @override
  Stream<DataState> mapEventToState(DataEvent event) async* {
    if (event is FetchData) {
      yield DataLoading();
      try {
        final data = await dataRepository.getDataFromApi();
        dataRepository.cacheData(data);
        yield DataLoaded(data: data);
      } catch (e) {
        yield DataError(errorMessage: e.toString());
      }
    }
  }
}

이제 데이터를 가져오고 캐싱하는 데 필요한 비즈니스 로직을 구현했습니다. 마지막으로, Bloc을 사용하여 UI에서 데이터를 표시합니다.

class DataScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => DataBloc(dataRepository: DataRepository()),
      child: Scaffold(
        appBar: AppBar(
          title: Text('Data Screen'),
        ),
        body: BlocBuilder<DataBloc, DataState>(
          builder: (context, state) {
            if (state is DataLoading) {
              return CircularProgressIndicator();
            } else if (state is DataLoaded) {
              return ListView.builder(
                itemCount: state.data.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(state.data[index].title),
                  );
                },
              );
            } else if (state is DataError) {
              return Text('Error: ${state.errorMessage}');
            }
            return Container();
          },
        ),
      ),
    );
  }
}

지금까지 Bloc 패턴을 사용하여 데이터베이스 캐싱을 구현하는 방법을 알아보았습니다. 이를 통해 앱의 성능을 향상시키고 사용자 경험을 개선할 수 있습니다.

Bloc 패턴 소개

데이터베이스 캐싱 구현하기

참고 자료