[flutter] 플러터에서 훅(hook)을 이용하여 사용자 입력 유효성 검사하기

14 Dec 2023

flutter

플러터에서 사용자 입력 폼의 유효성을 검사하는 일은 매우 중요합니다. 이를 위해 훅을 이용하여 간편하게 사용자 입력 폼의 유효성을 검사할 수 있습니다.

훅(Hook)이란?

훅은 함수형 컴포넌트에서 상태 관리 및 다양한 기능을 구현하기 위한 기술로, useState나 useEffect와 같은 함수를 제공합니다. 이를 이용하면 클래스형 컴포넌트에서의 상태 관리 및 라이프사이클 메서드의 구현을 간편하게 할 수 있습니다.

플러터에서 훅(Hook) 사용하기

플러터에서 훅을 지원하는 패키지인 flutter_hooks를 이용하여 사용자 입력 폼의 유효성을 검사할 수 있습니다. 먼저 flutter_hooks를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_hooks: ^0.18.0

다음으로, flutter_hooks에서 제공하는 useForm 훅을 이용하여 사용자 입력 폼의 유효성을 검사할 수 있습니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final formKey = useMemoized(() => GlobalKey<FormState>());
  
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('훅을 이용한 유효성 검사'),
        ),
        body: Form(
          key: formKey,
          child: Column(
            children: <Widget>[
              TextFormField(
                validator: (value) {
                  if (value.isEmpty) {
                    return '값을 입력해주세요';
                  }
                  return null;
                },
              ),
              ElevatedButton(
                onPressed: () {
                  if (formKey.currentState.validate()) {
                    // 폼이 유효한 경우 처리
                  }
                },
                child: Text('검사하기'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

useForm 훅을 이용하여 폼의 상태와 유효성 검사를 쉽게 처리할 수 있습니다. 위 예시 코드를 통해 플러터에서 훅을 이용하여 사용자 입력 폼의 유효성을 검사하는 방법을 살펴보았습니다.

더 많은 정보를 원하시면, flutter_hooks 패키지를 참고하시기 바랍니다.