[flutter] 플러터에서 훅(hook)을 사용해 위젯을 작성하는 방법

14 Dec 2023

flutter

플러터(Flutter)에서 후크(hooks)는 상태를 처리하고 다양한 기능을 제공하는 데 사용됩니다. 후크를 사용하여 간단하고 효율적으로 상태를 관리하고 위젯을 작성할 수 있습니다. 이러한 후크는 플러터 2.0에서 소개되었으며, 기존의 StatefulWidget 및 State 클래스 대신 사용할 수 있는 새로운 방식의 상태 관리 도구입니다.

플러터 후크(hook)란?

플러터 훅은 함수형 구성요소로, 상태 유지, 수명주기 관리, 효율성을 개선하고 코드의 재사용성을 높이는 데 사용됩니다. 함수형 컴포넌트에서 상태를 관리하고 위젯을 작성할 수 있도록 도와줍니다.

플러터 훅 사용하기

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

class CounterApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    var counter = useState(0);

    return Scaffold(
      appBar: AppBar(
        title: Text('플러터 후크 예제'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '버튼을 누른 횟수:',
            ),
            Text(
              '${counter.value}',
              style: Theme
                  .of(context)
                  .textTheme
                  .headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.value++,
        tooltip: '증가',
        child: Icon(Icons.add),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: CounterApp()));

위의 예제는 플러터 훅을 사용하여 CounterApp 위젯을 작성하는 간단한 예제입니다. useState를 사용하여 상태를 선언하고 변경할 수 있습니다.

플러터 후크의 장점

코드 단순화: 후크를 사용하면 상태 및 로직을 보다 간결하게 작성할 수 있습니다.
상태 관리: useState, useEffect 등의 후크 함수를 사용하여 상태 및 수명주기를 관리할 수 있습니다.
재사용성: 후크를 사용하면 로직을 추상화하여 재사용할 수 있습니다.

플러터 후크는 간편하게 상태 및 로직을 관리하고 위젯을 작성하는 데 유용한 도구입니다. 사용법을 익혀서 코드를 보다 간결하고 효율적으로 작성하는 데에 도움이 될 것입니다.

참고: Flutter Hooks 라이브러리