[flutter] 플러터 Riverpod와 로그인 유효성 검사 방법

30 Nov 2023

flutter

플러터(Flutter)는 Google에서 개발한 사용자 인터페이스(UI)를 만들기 위한 오픈 소스 프레임워크입니다. Riverpod는 플러터의 상태 관리 라이브러리 중 하나로, 의존성 주입(Dependency Injection)과 상태 관리를 효율적으로 처리할 수 있게 해줍니다.

이 글에서는 Riverpod를 사용하여 로그인 폼에 대한 유효성 검사를 어떻게 수행할 수 있는지 알아보겠습니다.

1. Riverpod 설치

프로젝트에서 Riverpod를 사용하기 위해 pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.0

의존성을 추가한 뒤 터미널에서 flutter packages get 명령을 실행하여 패키지를 다운로드합니다.

2. 로그인 폼 UI 구성

로그인 폼을 만들기 위해 필요한 위젯들을 구성합니다. 예를 들어, 아이디와 비밀번호를 입력받는 TextField 위젯, 로그인 버튼을 나타내는 ElevatedButton 위젯 등을 사용할 수 있습니다.

class LoginForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          ... // 아이디 입력 필드
        ),
        TextField(
          ... // 비밀번호 입력 필드
        ),
        ElevatedButton(
          onPressed: () {
            // 로그인 버튼 클릭 시 동작
          },
          child: Text('로그인'),
        ),
      ],
    );
  }
}

3. 폼 유효성 검사

유효성 검사를 위해 Riverpod에서 제공하는 Provider를 사용합니다. Provider는 상태를 제공하고 관리할 수 있는 객체입니다. 아이디와 비밀번호의 유효성을 검사하기 위해 Provider를 다음과 같이 선언합니다.

final idProvider = Provider<String>((ref) {
  // 아이디 유효성 검사 로직 작성
});

final passwordProvider = Provider<String>((ref) {
  // 비밀번호 유효성 검사 로직 작성
});

ref 매개변수를 사용하여 의존성 객체에 접근할 수 있습니다.

4. 테스트하기

로그인 폼에서 유효성 검사를 수행하기 위해 Consumer 위젯을 사용합니다. Consumer 위젯은 Provider를 사용하여 상태를 구독하고 변경사항을 감지하는 역할을 합니다. 아이디와 비밀번호 TextField 위젯에 Consumer 위젯을 추가하여 유효성 검사 결과를 표시할 수 있습니다.

class LoginForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Consumer(builder: (context, watch, child) {
          final id = watch(idProvider);
          return TextField(
            onChanged: (value) => id = value,
            // ...
          );
        }),
        Consumer(builder: (context, watch, child) {
          final password = watch(passwordProvider);
          return TextField(
            onChanged: (value) => password = value,
            // ...
          );
        }),
        ElevatedButton(
          onPressed: () {
            // 로그인 버튼 클릭 시 동작
          },
          child: Text('로그인'),
        ),
      ],
    );
  }
}

이제 아이디와 비밀번호 입력이 변경될 때마다 Consumer 위젯에서 유효성 검사 로직을 수행하고 결과를 알려줍니다.

5. 로그인 동작

로그인 버튼을 클릭했을 때 유효성 검사를 통과하면 로그인 동작을 수행할 수 있습니다. 예를 들어, 서버로 아이디와 비밀번호를 전송하여 인증을 처리하는 로직을 구현할 수 있습니다.

class LoginForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // ...

        ElevatedButton(
          onPressed: () {
            // 아이디와 비밀번호 유효성 검사
            final id = context.read(idProvider);
            final password = context.read(passwordProvider);
            
            if (id.isNotEmpty && password.isNotEmpty) {
              // 로그인 동작 수행
              // ...
            } else {
              // 유효성 검사 실패
              // ...
            }
          },
          child: Text('로그인'),
        ),
      ],
    );
  }
}

로그인 버튼을 클릭하면 context.read 메서드를 통해 아이디와 비밀번호 상태를 가져온 후 유효성을 검사합니다. 유효성 검사에 통과하면 로그인을 수행하고, 실패하면 적절한 처리를 수행합니다.

결론

이제 Riverpod를 사용하여 로그인 폼의 유효성 검사를 수행하는 방법에 대해 알아보았습니다. Riverpod의 강력한 상태 관리 기능을 활용하여 플러터 애플리케이션의 로직을 효율적으로 구성할 수 있습니다.