[flutter] 플러터에서 훅(hook)을 활용하여 폼(form) 유효성 검사하기

14 Dec 2023

flutter

플러터(Flutter) 어플리케이션을 개발하다 보면 사용자가 입력한 폼 데이터를 유효성 검사(validating)해야 하는 경우가 있습니다. 이때 훅(hook)을 활용하여 이러한 유효성 검사를 간편하게 할 수 있습니다. 여기에서는 플러터의 훅을 활용하여 폼의 유효성을 검사하는 방법을 알아보겠습니다.

필요한 패키지 설치하기

먼저, 폼 유효성 검사에 필요한 패키지를 설치해야 합니다. 이를 위해 flutter_hooks 패키지를 사용하겠습니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다.

dependencies:
  flutter_hooks: ^0.16.0

그리고 해당 패키지를 설치합니다.

flutter pub get

훅을 사용하여 폼 유효성 검사하기

이제, 폼 유효성 검사를 위해 필요한 훅을 사용하여 간단한 예제를 살펴보겠습니다. 먼저, 다음과 같이 useForm 훅을 정의하여 폼의 상태와 유효성 검사를 다룰 수 있도록 합니다.

import 'package:flutter_hooks/flutter_hooks.dart';

class FormModel {
  String? email;
  String? password;
}

FormModel useFormValidation() {
  var form = useState(FormModel());
  
  void validateForm() {
    // 폼의 유효성을 검사하는 로직을 작성합니다.
    // 유효성 검사가 통과하지 않으면 해당 오류를 form 오브젝트에 저장합니다.
  }

  return form.value;
}

위 예제에서 useFormValidation 함수는 email과 password 필드를 가진 FormModel을 생성하고, 이를 통해 사용자의 입력을 다룰 수 있도록 합니다. 또한, validateForm 함수를 이용하여 폼의 유효성을 검사하고 오류를 처리할 수 있습니다.

유효성 검사 적용하기

폼 유효성 검사가 필요한 페이지에서 위에서 정의한 useFormValidation 훅을 사용하여 폼 유효성을 검사할 수 있습니다.

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

class MyFormPage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    var form = useFormValidation();

    return Scaffold(
      appBar: AppBar(
        title: Text('Form Validation'),
      ),
      body: Column(
        children: [
          TextField(
            onChanged: (value) {
              form.email = value;
            },
            decoration: InputDecoration(
              labelText: 'Email',
              errorText: form.email == null ? 'Enter an email' : null,
            ),
          ),
          TextField(
            onChanged: (value) {
              form.password = value;
            },
            obscureText: true,
            decoration: InputDecoration(
              labelText: 'Password',
              errorText: form.password == null ? 'Enter a password' : null,
            ),
          ),
          ElevatedButton(
            onPressed: () {
              form.validateForm();
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

위의 예제에서 폼 페이지에서는 useFormValidation 훅을 사용하여 form 객체를 얻어와 폼 요소들의 상태와 유효성 검사를 다룰 수 있습니다.

또한, TextField 위젯의 onChanged 콜백을 통해 사용자의 입력을 받아 해당 값을 form 객체에 설정하고, ElevatedButton을 클릭할 때 form.validateForm()을 호출하여 폼의 유효성을 검사합니다.

훅을 활용하여 폼 유효성 검사를 간편하게 할 수 있습니다. 이를 통해 개발자는 더 직관적이고 효율적으로 폼의 유효성을 검사하고 오류를 처리할 수 있습니다.

더 많은 플러터 관련 정보는 플러터 공식 문서에서 찾아볼 수 있습니다.