이번 포스트에서는 플러터 훅(Hook) 위젯과 기존의 플러터 위젯 개발 방식을 비교해보겠습니다.

개요

• 플러터 Hook 위젯: Flutter 2.3 버전부터 추가된 기능으로 클래스 기반 위젯 대신 함수형 위젯을 사용하는 방식. 더 간결하고 효율적인 코드를 작성할 수 있도록 도와줌.
• 기존의 플러터 위젯: 플러터 2.2 버전 이전에 사용된 클래스 기반 위젯 개발 방식.

플러터 훅(Hook) 위젯

• 간결한 코드: HookWidget 클래스를 사용하여 함수형 위젯을 만들어서, 상태 관리 및 생명주기 함수를 간단하게 사용할 수 있음.
• 상태 관리: useState, useWatch, useEffect 등의 훅을 사용하여 상태와 생명주기를 관리할 수 있음.
• 재사용성: 함수형 구조로 인해, 코드의 재사용성이 뛰어나며, 테스트도 훨씬 용이해짐.

import 'package:flutter_hooks/flutter_hooks.dart';

HookWidget buildCounter() {
  var count = useState(0);
  return Column(
    children: <Widget>[
      Text('Count: ${count.value}'),
      ElevatedButton(
        onPressed: () => count.value++,
        child: Text('Increment'),
      ),
    ],
  );
}

기존의 플러터 위젯

• 클래스 기반: StatefulWidget 및 StatelessWidget을 사용하여 위젯을 작성하는 방식.
• 번거로운 상태 관리: setState를 사용하여 상태를 변경하고, 생명주기 함수를 오버라이딩하여 사용하는 등, 번거로운 작업이 많았음.
• 클래스 구조: 클래스의 구조로 인해, 코드가 복잡해지고, 테스트하기 어려움.

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

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('Count: $_count'),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _count++;
            });
          },
          child: Text('Increment'),
        ),
      ],
    );
  }
}

결론

• 플러터 Hook 위젯: 더 간결하고 효율적인 코드를 작성할 수 있으며, 상태 관리와 생명주기 관리가 쉬움.
• 기존의 플러터 위젯: 클래스 구조로 인해 복잡하고 테스트가 어려웠으나, 이에 대한 해결책으로 플러터 훅 위젯이 등장하게 되었음.

이상으로, 플러터 Hook 위젯과 기존의 플러터 위젯의 개발 프로세스를 비교해보았습니다.

플러터 공식 홈페이지에서 더 많은 정보를 확인할 수 있습니다.