[flutter] 플러터 훅 위젯을 활용한 사용자 입력 처리 방법

21 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 UI 빌드 툴킷으로, 사용자 입력 처리에 적합한 다양한 위젯을 제공합니다. 최근에는 훅(Hook) 기능을 활용해 상태 관리나 사용자 입력 처리를 보다 간편하게 할 수 있습니다. 이번 글에서는 플러터 훅 위젯을 사용하여 사용자 입력을 처리하는 방법에 대해 알아보겠습니다.

사용자 입력 처리를 위한 훅(Hook)

사용자 입력 처리를 위해 플러터 훅(Hook)을 활용할 때는 useState, useEffect 등의 훅 함수들을 사용할 수 있습니다. 이를 통해 사용자 입력에 대한 상태 관리 및 이벤트 핸들링을 보다 간편하게 처리할 수 있습니다.

사용자 입력 핸들링 예시

다음은 텍스트 입력 필드의 값을 상태로 관리하고, 사용자가 입력을 완료했을 때 그 값을 로깅하는 예시 코드입니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyInputWidget(),
    );
  }
}

class MyInputWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final textEditingController = useTextEditingController();
    final inputText = useState('');

    useEffect(() {
      print('입력값: ${inputText.value}');
    }, [inputText.value]);

    return Scaffold(
      appBar: AppBar(title: Text('사용자 입력 처리')),
      body: Center(
        child: TextField(
          controller: textEditingController,
          onChanged: (text) {
            inputText.value = text;
          },
          onSubmitted: (text) {
            inputText.value = text;
          },
        ),
      ),
    );
  }
}

위 코드에서 useTextEditingController 훅으로 textEditingController를 생성하고, useState 훅을 사용해 inputText를 상태로 관리합니다. useEffect 훅을 통해 inputText의 값이 변경될 때마다 해당 값을 로깅합니다. TextField 위젯에서는 onChanged와 onSubmitted 콜백을 통해 사용자 입력에 대한 처리를 수행합니다.

종합

이렇게 플러터 훅 위젯을 활용하여 사용자 입력 처리를 간편하게 할 수 있습니다. 훅을 사용하여 상태 관리와 이벤트 핸들링을 효과적으로 처리할 수 있으므로, 훅 기능을 적극 활용하여 플러터 앱의 사용자 경험을 향상시키는데 도움이 될 것입니다.

목차

사용자 입력 처리를 위한 훅(Hook)

사용자 입력 핸들링 예시

종합

참고 자료