HookWidget

HookWidget

• 다른 위젯보다 상태 관리 및 생명주기 관리를 보다 효율적으로 할 수 있다.

• 일반적인 위젯은 StatefulWidget을 상속받아서 상태 관리를 수행하지만, HookWidget은 Hook 라이브러리에서 제공하는 Hook 함수들을 사용하여 위젯의 상태 관리 및 생명주기를 관리한다.

• 일반적인 StatefulWidget을 사용하는 경우, 상태를 관리하기 위해 StatefulWidget 클래스와 그 하위 클래스인 State 클래스를 생성해야 하지만 Hook 위젯을 사용하는 경우, 상태를 관리하기 위해 별도의 클래스를 생성할 필요 없이 Hook 함수를 사용하여 위젯 내에서 상태를 관리할 수 있다.

• HookWidget은 StatelessWidget에서도 사용할 수 있으므로, StatelessWidget을 상속받은 위젯에서도 상태를 관리할 수 있다. 이러한 특징은 코드의 간결성과 재사용성을 높여준다.

• Hook 위젯의 또 다른 특징은 생명주기 관리이다. Hook 위젯에서는 useDispose, useLifecycle, useSingleTickerProvider 등의 Hook 함수를 사용하여 위젯의 생명주기를 관리할 수 있다. 이러한 Hook 함수들은 StatelessWidget에서도 사용할 수 있으며, StatefulWidget에서 사용하는 생명주기 메서드보다 더욱 간결하고 명확한 코드를 작성할 수 있도록 도와준다.

---

StatefulWidget으로 구현한 카운터 예제와 Hook 위젯으로 구현한 카운터 예제 비교

StatefulWidget

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Count:',
            ),
            Text(
              '$_count',
              style: Theme.of(context).textTheme.headline4,
            ),
            RaisedButton(
              onPressed: _increment,
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

HookWidget

import 'package:flutter_hooks/flutter_hooks.dart';

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

    void _increment() {
      count.value++;
    }

    return Scaffold(
      appBar: AppBar(
        title: Text('Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Count:',
            ),
            Text(
              '${count.value}',
              style: Theme.of(context).textTheme.headline4,
            ),
            RaisedButton(
              onPressed: _increment,
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

기능적으로는 두 예제 동일하지만 HookWidget을 사용한 예제는 상태 관리가 간결하게 처리된다. useState Hook 함수를 사용하여 _count 변수를 생성하고, 그 값을 증가시키는 _increment 함수를 정의하고 이렇게 정의된 Hook 함수들은 상태 관리 및 생명주기 관리를 위젯 내에서 보다 간결하게 처리할 수 있도록 도와준다.

---