[flutter] 플러터에서 bloc 패턴을 사용하여 앱의 사용자 입력 관리하기

20 Dec 2023

flutter

플러터는 사용자 입력을 관리하고 상태를 관리하기 위해 Bloc (Business Logic Component) 패턴을 사용하는 것이 일반적입니다. 이 패턴을 사용하면 앱의 사용자 입력과 상태를 효율적으로 관리할 수 있습니다.

Bloc 패턴 개요

Bloc 패턴은 사용자 입력, 비즈니스 로직 및 상태 관리를 분리하여 구조화하는 데 사용됩니다. 이 패턴을 통해 코드의 재사용성을 높이고 유지 보수를 용이하게 할 수 있습니다.

Bloc 패턴의 구성 요소

Bloc 패턴은 다음 두 가지 주요 구성 요소로 구성됩니다.

이벤트(Event): 사용자 입력 또는 시스템 이벤트와 같은 외부 요인을 나타내는 객체입니다.
상태(State): 앱의 상태를 표현하는 객체로, 상태가 변경될 때마다 UI가 업데이트됩니다.

Bloc 구현하기

다음은 간단한 Counter 앱에 Bloc 패턴을 적용하는 예시 코드입니다.

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

// 이벤트 정의
abstract class CounterEvent {}

class IncrementEvent extends CounterEvent {}

class DecrementEvent extends CounterEvent {}

// 상태 정의
class CounterState {
  final int count;

  CounterState(this.count);
}

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

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (context) => CounterBloc(),
        child: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final CounterBloc counterBloc = BlocProvider.of<CounterBloc>(context);

  return Scaffold(
    appBar: AppBar(
      title: Text('Bloc Counter'),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'Counter:',
          ),
          BlocBuilder<CounterBloc, CounterState>(
            builder: (context, state) {
              return Text(
                '${state.count}',
                style: TextStyle(fontSize: 24),
              );
            },
          ),
        ],
      ),
    ),
    floatingActionButton: Column(
      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: <Widget>[
        FloatingActionButton(
          onPressed: () {
            counterBloc.add(IncrementEvent());
          },
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
        SizedBox(height: 16),
        FloatingActionButton(
          onPressed: () {
            counterBloc.add(DecrementEvent());
          },
          tooltip: 'Decrement',
          child: Icon(Icons.remove),
        ),
      ],
    ),
  );
}
}

위의 코드에서는 먼저 Counter 앱에 필요한 이벤트와 상태를 정의하고, CounterBloc 클래스를 구현합니다. 그런 다음 main 함수에서 CounterBloc을 BlocProvider로 감싸어 MyApp을 구성합니다. 그리고 MyApp에서의 MyHomePage 클래스에서 BlocBuilder를 사용하여 Bloc 패턴을 통해 상태를 감지하고 UI를 업데이트합니다.

Bloc 패턴을 사용하면 사용자 입력과 앱의 상태를 효율적으로 관리할 수 있으며, 코드의 가독성과 유지보수성을 높일 수 있습니다.

결론

플러터에서 Bloc 패턴을 사용하여 사용자 입력을 관리하는 방법에 대해 알아보았습니다. Bloc 패턴을 사용하면 앱의 복잡성을 줄이고 유지보수성을 향상시킬 수 있으며, 사용자 경험을 향상시키는 데 도움이 됩니다.

참고문헌: