[flutter] 플러터에서 bloc 패턴을 사용하여 회원 가입 및 로그인 시스템 구현하기

20 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크로, 다양한 기기에서 동작하는 애플리케이션을 손쉽게 개발할 수 있습니다. 이번 포스트에서는 플러터에서 bloc 패턴을 사용하여 간단한 회원 가입 및 로그인 시스템을 구현하는 방법에 대해 살펴보겠습니다.

1. Bloc 패턴이란?

Bloc은 Business Logic Component의 약자로, 사용자 인터페이스와 비즈니스 로직을 분리하여 관리하는 디자인 패턴입니다. 이를 통해 애플리케이션의 상태를 관리하고 비즈니스 로직을 효율적으로 처리할 수 있습니다.

2. 프로젝트 설정

우선, Flutter 프로젝트를 생성하고 필요한 의존성을 추가합니다. 이 예시에서는 flutter_bloc 및 equatable 라이브러리를 사용하겠습니다.

dependencies:
  flutter_bloc: ^7.0.0
  equatable: ^2.0.3

의존성을 추가한 후에는 pubspec.yaml 파일을 업데이트하고, 터미널에서 flutter pub get 명령어를 실행하여 의존성을 설치합니다.

3. 회원 가입 및 로그인 시스템 구현

3.1. 이벤트와 상태 정의

이벤트(Event)는 사용자 입력 또는 시스템 이벤트를 의미하고, 상태(State)는 애플리케이션의 상태를 나타냅니다.

다음은 회원 가입과 로그인을 위한 이벤트와 상태를 정의하는 코드 예시입니다.

// event.dart
abstract class AuthEvent {}

class SignUpEvent extends AuthEvent {
  final String email;
  final String password;

  SignUpEvent({required this.email, required this.password});
}

class LoginEvent extends AuthEvent {
  final String email;
  final String password;

  LoginEvent({required this.email, required this.password});
}

// state.dart
abstract class AuthState {}

class AuthInitial extends AuthState {}

class SignUpSuccess extends AuthState {}

class LoginSuccess extends AuthState {}

class AuthFailure extends AuthState {
  final String error;

  AuthFailure({required this.error});
}

3.2. Bloc 클래스 구현

이제 이벤트와 상태를 사용하여 Bloc 클래스를 구현합니다. Bloc 클래스는 이벤트를 받아들이고 적절한 상태를 내보내는 역할을 합니다.

class AuthBloc extends Bloc<AuthEvent, AuthState> {
  AuthBloc() : super(AuthInitial());

  @override
  Stream<AuthState> mapEventToState(AuthEvent event) async* {
    if (event is SignUpEvent) {
      // 회원 가입 로직 구현
      yield SignUpSuccess();
    } else if (event is LoginEvent) {
      // 로그인 로직 구현
      yield LoginSuccess();
    }
  }
}

3.3. 사용자 인터페이스와 Bloc 연결

마지막으로, 사용자 인터페이스와 Bloc을 연결하여 회원 가입과 로그인을 실행하는 코드를 작성합니다.

// Screen 또는 Widget 클래스 내부

final authBloc = AuthBloc();

// 회원 가입
authBloc.add(SignUpEvent(email: 'user@example.com', password: 'password'));

// 로그인
authBloc.add(LoginEvent(email: 'user@example.com', password: 'password'));

결론

이제 플러터에서 bloc 패턴을 사용하여 간단한 회원 가입 및 로그인 시스템을 구현하는 방법에 대해 알아보았습니다. Bloc 패턴을 통해 비즈니스 로직을 효율적으로 관리하고, 애플리케이션의 상태를 간편하게 관리할 수 있습니다.

참고 문헌:

Flutter Bloc 라이브러리: https://pub.dev/packages/flutter_bloc
Equatable 라이브러리: https://pub.dev/packages/equatable