[flutter] 플러터에서의 훅 위젯(Hook Widget) 사용 방법

21 Dec 2023

flutter

훅 위젯을 사용하여 플러터(Flutter) 애플리케이션을 개발하는 것은 함수형 프로그래밍과 상태 관리를 보다 효율적으로 할 수 있습니다. 이 기사에서는 훅 위젯을 어떻게 사용하는지에 대해 설명하겠습니다.

1. 훅(Hook)이란?

훅은 React Native의 개념으로, 함수 컴포넌트에서 React의 상태와 생명주기 기능을 “훅” 할 수 있는 기능을 말합니다. 훅 위젯은 플러터에서 동일한 개념을 사용하는 것을 말합니다.

2. 훅 위젯 패키지 추가

먼저, flutter_hooks 패키지를 플러터 프로젝트에 추가해야 합니다. 이를 위해 pubspec.yaml 파일에 아래와 같이 패키지를 추가합니다.

dependencies:
  flutter_hooks: ^1.0.0

그리고 패키지를 업데이트해줍니다.

flutter pub get

3. 훅 위젯 사용하기

다음으로, 기존의 StatefulWidget을 사용하는 대신에 훅 위젯을 사용하여 상태를 관리할 수 있습니다. 예를 들어, 다음과 같이 상태를 관리하는 훅 위젯을 사용할 수 있습니다.

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

class Counter extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final count = useState(0);

    return Scaffold(
      appBar: AppBar(
        title: Text('훅 위젯 사용 예시'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('버튼을 누른 횟수:'),
            Text(
              '${count.value}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => count.value++,
        tooltip: '증가',
        child: Icon(Icons.add),
      ),
    );
  }
}

이렇게 하면 useState 훅을 사용하여 상태를 관리하고, 해당 상태가 변경될 때 앱이 자동으로 업데이트됩니다.

결론

이제 훅 위젯을 사용하여 플러터 애플리케이션을 더 효율적으로 개발할 수 있습니다. 함수형 프로그래밍과 상태 관리의 장점을 살려 플러터에서의 개발을 더욱 즐겁게 할 수 있습니다.

더 많은 정보는 flutter_hooks 패키지 페이지에서 확인하실 수 있습니다.