[flutter] useState 훅 위젯의 사용법과 예제

21 Dec 2023

flutter

React Native에서 오래전부터 사용되던 useState 훅은 Flutter Hooks 패키지를 통해 Flutter에도 도입되었습니다. 이 훅은 상태를 유지하고 업데이트하는데 사용됩니다. 아래에서는 useState 훅을 어떻게 사용하는지와 간단한 예제를 살펴보도록 하겠습니다.

useState 훅의 사용법

useState 훅은 현재의 상태 값을 유지하고 새로운 상태 값을 갱신하기 위해 사용됩니다. 여러 개의 상태 값을 추가할 수도 있습니다.

import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    // 정수형의 상태값을 가지고 있는 useState 훅
    var count = useState(0);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('useState 훅 예제'),
        ),
        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: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

위 예제에서는 useState 훅을 사용하여 count 변수의 초기값을 0으로 설정하였습니다. 이어서 count.value를 사용하여 현재의 상태 값을 가져오고 업데이트 하는 것을 볼 수 있습니다.

useState를 사용한 간단한 예제

만약 위의 예제를 실행하면 화면에 버튼이 표시될 것 입니다. 이 버튼을 클릭할 때마다 count의 값이 1씩 증가할 것 입니다. 이는 useState 훅을 통해 상태 값을 업데이트한 결과입니다.

이상으로 Flutter에서 useState 훅을 사용하는 방법과 간단한 예제를 살펴보았습니다. React Native에서의 사용법과 유사하게 이해하고 적용할 수 있을 것입니다.

참고 자료:

https://pub.dev/packages/flutter_hooks
https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html