[flutter] 플러터에서 bloc 패턴을 사용하여 데이터 관리하기

20 Dec 2023

flutter

플러터(Flutter) 앱을 개발하다 보면 앱의 상태 관리와 데이터 흐름을 효과적으로 관리할 필요가 있습니다. 이를 위해 일반적으로 bloc(Block) 패턴을 사용하여 데이터 관리를 합니다. 이번 블로그 포스트에서는 플러터에서 bloc 패턴을 어떻게 사용하는지에 대해 소개하겠습니다.

1. Bloc 패턴이란?

Bloc 패턴은 Business Logic Component의 약자로, 앱의 데이터를 상태와 이벤트에 따라 관리하는 패턴입니다. Bloc 패턴은 앱의 상태를 변경하는 로직과 UI를 분리하여 관리할 수 있도록 도와줍니다.

2. Bloc 패턴의 구성 요소

Bloc 패턴은 크게 다음 3가지 구성 요소로 이루어져 있습니다.

2.1. 이벤트(Event)

이벤트는 앱 내에서 발생하는 액션을 나타내는 객체입니다. 버튼 클릭, 사용자 입력 또는 네트워크에서의 데이터 수신 등이 이벤트에 해당합니다.

2.2. 상태(State)

상태는 앱의 현재 상태를 나타내는 객체입니다. 이벤트에 의해 상태가 변경될 수 있으며, UI는 이 상태를 기반으로 렌더링됩니다.

2.3. 블록(Block)

블록은 이벤트를 받아들여 상태를 변경시키는 비즈니스 로직을 담당하는 부분입니다. 이벤트를 처리하고 새로운 상태를 발행할 수 있습니다.

3. 플러터에서 Bloc 패턴 사용하기

플러터에서 BloC 패턴을 구현하기 위해 flutter_bloc와 equatable 패키지를 사용하여 간단한 카운터 앱을 만들어 보겠습니다.

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:equatable/equatable.dart';

// 이벤트
abstract class CounterEvent extends Equatable {}

class Increment extends CounterEvent {
  @override
  List<Object> get props => [];
}

// 상태
class CounterState extends Equatable {
  final int count;

  CounterState(this.count);

  @override
  List<Object> get props => [count];
}

// 블록
class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(CounterState(0));

  @override
  Stream<CounterState> mapEventToState(CounterEvent event) async* {
    if (event is Increment) {
      yield CounterState(state.count + 1);
    }
  }
}

// 위젯
class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bloc Pattern Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            BlocProvider(
              create: (context) => CounterBloc(),
              child: BlocBuilder<CounterBloc, CounterState>(
                builder: (context, state) {
                  return Text(
                    'Count: ${state.count}',
                    style: TextStyle(fontSize: 24),
                  );
                },
              ),
            ),
            SizedBox(height: 20),
            RaisedButton(
              onPressed: () {
                context.read<CounterBloc>().add(Increment());
              },
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: CounterPage(),
  ));
}

위 코드는 flutter_bloc 패키지를 사용하여 간단한 카운터 앱을 Bloc 패턴으로 구현한 예시입니다.

이렇게 BloC 패턴을 적용하면 데이터 관리를 효과적으로 할 수 있으며, 상태 관리와 UI를 분리하여 코드를 깔끔하게 유지할 수 있습니다.

마무리

플러터에서는 Bloc 패턴을 사용하여 데이터를 효과적으로 관리할 수 있습니다. Bloc 패턴을 이용하면 복잡한 앱의 데이터 관리를 보다 쉽게 할 수 있으며, 코드를 깔끔하게 유지할 수 있습니다.

이상으로 플러터에서 Bloc 패턴을 사용하여 데이터를 관리하는 방법에 대해 알아보았습니다.

참고 자료: flutter_bloc, equatable