[flutter] 플러터 훅 위젯을 활용한 컴포넌트 재사용 방법

21 Dec 2023

flutter

플러터(Flutter)는 다양한 위젯을 조합하여 앱을 만들 수 있는데, 훅(Hooks)을 활용하면 컴포넌트를 더욱 효과적으로 재사용할 수 있습니다. 이번 포스트에서는 플러터 훅 위젯을 활용하여 컴포넌트를 어떻게 재사용하는지 살펴보겠습니다.

1. 플러터 훅(Hooks)이란?

플러터 훅(Hooks) 은 플러터 2.7 이후에 도입된 개념으로, 상태 관리와 라이프사이클을 관리하기 위한 도구입니다. 훅을 사용하면 함수형 위젯에서도 상태를 관리할 수 있고, 더 직관적이고 간결한 코드를 작성할 수 있습니다.

2. 컴포넌트 재사용을 위한 훅(Hooks) 활용

예를 들어, 텍스트 필드와 버튼이 함께 있는 간단한 로그인 폼을 만들어야 한다고 가정해봅시다. 이런 경우 훅을 사용하여 로그인 폼을 구현할 수 있습니다.

다음은 간단한 로그인 폼 컴포넌트를 훅을 사용하여 구현한 예시입니다.

import 'package:flutter/material.dart';

class LoginForm extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final TextEditingController _usernameController = useTextEditingController();
    final TextEditingController _passwordController = useTextEditingController();

    return Column(
      children: [
        TextField(
          controller: _usernameController,
          decoration: InputDecoration(
            labelText: 'Username',
          ),
        ),
        TextField(
          controller: _passwordController,
          decoration: InputDecoration(
            labelText: 'Password',
          ),
          obscureText: true,
        ),
        ElevatedButton(
          onPressed: () {
            String username = _usernameController.text;
            String password = _passwordController.text;
            // Perform login logic
          },
          child: Text('Login'),
        ),
      ],
    );
  }
}

위 예시에서는 useTextEditingController 훅을 사용하여 텍스트 필드의 컨트롤러를 생성하고, 해당 컨트롤러를 사용하여 텍스트 필드를 구성하고 버튼을 누를 때 로그인 로직을 수행하는 LoginForm 컴포넌트를 구현했습니다.

3. 결론

플러터 훅을 활용하면 컴포넌트의 재사용성을 높일 수 있고, 코드의 가독성을 향상시킬 수 있습니다. 특히, 간단한 UI 컴포넌트를 만들어야 하는 경우, 훅을 활용하여 간결하고 효율적인 코드를 작성할 수 있습니다.

이상으로 플러터 훅을 활용한 컴포넌트 재사용 방법에 대해 알아보았습니다. 플러터 개발 시 훅을 적극적으로 활용하여 보다 효율적이고 유지보수가 쉬운 코드를 작성해보시기 바랍니다.