[flutter] 플러터에서의 bloc 패턴으로 로그인/로그아웃 기능 구현하기

20 Dec 2023

flutter

Flutter에서 BLoC (Business Logic Component) 패턴은 애플리케이션의 비즈니스 로직을 상태 관리와 분리시켜 UI의 복잡성을 줄이는 데 유용합니다. 이 패턴을 사용하여 Flutter 애플리케이션에서 로그인 및 로그아웃 기능을 구현할 수 있습니다.

1. BLoC 패턴 이해

BLoC 패턴은 상태를 관리하는 Stream을 통해 UI와 비즈니스 로직을 분리합니다. 사용자의 입력 및 이벤트는 Stream에 추가되고, BLoC는 이를 처리하여 새로운 상태를 생성합니다. UI는 이 상태를 감지하고 반응하여 새로운 화면을 렌더링합니다.

2. 로그인/로그아웃 BLoC 구현하기

다음은 간단한 예제 코드로, Flutter에서 로그인/로그아웃 BLoC를 구현하는 방법을 보여줍니다.

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

// BLoC
class AuthBloc {
  final _isLoggedIn = StreamController<bool>.broadcast();

  Stream<bool> get isLoggedIn => _isLoggedIn.stream;

  void login() {
    // 실제 로그인 로직은 여기에 구현
    _isLoggedIn.sink.add(true);
  }

  void logout() {
    // 로그아웃 로직은 여기에 구현
    _isLoggedIn.sink.add(false);
  }

  void dispose() {
    _isLoggedIn.close();
  }
}

// UI
class HomeScreen extends StatelessWidget {
  final AuthBloc bloc;

  HomeScreen({required this.bloc});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<bool>(
      stream: bloc.isLoggedIn,
      initialData: false,
      builder: (context, snapshot) {
        if (snapshot.data == true) {
          return LoggedInScreen(bloc: bloc);
        } else {
          return LoggedOutScreen(bloc: bloc);
        }
      },
    );
  }
}

// 사용법
void main() {
  final authBloc = AuthBloc();

  runApp(MaterialApp(
    home: HomeScreen(bloc: authBloc),
  ));
}

위의 코드는 AuthBloc 클래스를 사용하여 로그인/로그아웃 로직을 구현하고, UI에서는 StreamBuilder를 사용하여 상태 변화에 따라 화면을 업데이트합니다.

이러한 방식으로 BLoC를 사용하면 Flutter 애플리케이션에서 로그인/로그아웃 기능을 효율적으로 구현할 수 있습니다.

BLoC 패턴에 대한 추가적인 학습과 실제 프로젝트 적용에 대한 예제는 여기를 참고하십시오.

이제 BLoC 패턴을 사용하여 Flutter 애플리케이션에서 로그인/로그아웃 기능을 구현하는 방법에 대해 알아보았습니다. BLoC 패턴을 활용하여 애플리케이션의 비즈니스 로직을 보다 효율적으로 관리할 수 있습니다.