[flutter] 플러터에서의 bloc 패턴으로 데이터 유효성 검사하기

20 Dec 2023

flutter

플러터(Flutter) 앱을 개발할 때, 사용자 입력 데이터의 유효성을 검사하고 처리하는 것은 매우 중요합니다. 이를 위해, bloc 패턴을 사용하여 데이터의 유효성을 검사하고 관리할 수 있습니다. 이 블로그에서는 플러터 앱에서 bloc 패턴을 이용하여 데이터 유효성을 검사하는 방법에 대해 알아보겠습니다.

1. bloc 패턴 소개

bloc은 Business Logic Component의 약자로, 플러터 앱의 비즈니스 로직을 관리하기 위한 디자인 패턴입니다. bloc 패턴을 사용하면 UI와 비즈니스 로직을 분리할 수 있어 유지보수와 테스트가 용이해집니다.

2. 데이터 유효성 검사를 위한 bloc 구성

데이터 유효성 검사를 위한 bloc를 구성하기 위해, 먼저 bloc 및 이와 관련된 클래스를 생성해야 합니다. 예를 들어, 회원 가입 화면에서 사용자 이름과 이메일을 검사하는 bloc를 만든다고 가정해봅시다. 이를 위해 RegistrationBloc과 RegistrationEvent 클래스를 생성합니다.

class RegistrationBloc {
  final _usernameController = StreamController<String>();
  final _emailController = StreamController<String>();

  Stream<String> get username => _usernameController.stream;
  Stream<String> get email => _emailController.stream;
  
  void validateUsername(String username) {
    // 사용자 이름 유효성 검사 로직
  }

  void validateEmail(String email) {
    // 이메일 유효성 검사 로직
  }
}

3. UI와 bloc 연결

이제 위에서 만든 RegistrationBloc을 회원 가입 화면과 연결해야 합니다. 사용자 입력을 받는 텍스트 필드의 값이 변할 때마다 해당 bloc의 유효성 검사 메서드를 호출하고, 결과에 따라 UI를 업데이트합니다.

class RegistrationScreen extends StatelessWidget {
  final _registrationBloc = RegistrationBloc();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          StreamBuilder<String>(
            stream: _registrationBloc.username,
            builder: (context, snapshot) {
              // 사용자 이름 유효성 검사 결과에 따라 UI 업데이트
            },
          ),
          StreamBuilder<String>(
            stream: _registrationBloc.email,
            builder: (context, snapshot) {
              // 이메일 유효성 검사 결과에 따라 UI 업데이트
            },
          ),
        ],
      ),
    );
  }
}

4. 결론

플러터의 bloc 패턴을 사용하여 데이터 유효성을 검사하고 처리할 수 있습니다. 이를 통해 앱의 유지보수성을 높이고 사용자 경험을 개선할 수 있습니다. bloc 패턴을 이용하면 비즈니스 로직과 UI를 분리하여 코드의 가독성을 높일 수 있으며, 나중에 발생할 수 있는 유효성 검사 관련 기능의 변경에 대해 유연하게 대처할 수 있습니다.

참고 문헌:

이상으로 데이터 유효성 검사를 위한 bloc 패턴에 대해 알아보았습니다. 부가적인 질문이나 의견이 있으시면 언제든지 연락주세요!