[flutter] 플러터의 useState 훅(hook)을 이용한 상태 관리 예제

14 Dec 2023

flutter

플러터(Flutter)에서는 useState 훅을 이용하여 간단하게 상태를 관리할 수 있습니다. 이 기능을 사용하면 상태를 추적하고 변경할 수 있어서 UI에 반영되는 데이터를 쉽게 관리할 수 있습니다.

이번 예제에서는 useState 훅을 사용하여 간단한 카운터 앱을 만들어보겠습니다.

useState 훅이란 무엇인가?

useState 훅은 플러터 버전 2.2.0 이상에서 도입된 기능으로, 상태를 관리하기 위해 필요한 use할 수 있는 훅입니다. 이를 사용하면 위젯의 상태를 간단하게 관리할 수 있으며, 상태가 변경될 때마다 화면이 자동으로 갱신됩니다.

다음은 useState 훅의 기본 구조입니다.

final ValueNotifier<int> count = useState(0);

useState 훅을 이용하여 초기값을 가지는 ValueNotifier를 생성하고, 해당 값의 변경을 추적할 수 있습니다.

카운터 앱 만들기

이제 useState 훅을 사용하여 간단한 카운터 앱을 만들어보겠습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterApp(),
    );
  }
}

class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final ValueNotifier<int> count = useState(0);
    
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Count',
              style: TextStyle(fontSize: 20),
            ),
            ValueListenableBuilder(
              valueListenable: count,
              builder: (BuildContext context, int value, Widget? child) {
                return Text(
                  '$value',
                  style: TextStyle(fontSize: 50),
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          count.value++;
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

위 예제에서는 ValueNotifier를 생성하여 useState 훅을 이용하여 상태를 관리하고, 화면에 ValueListenableBuilder를 사용하여 상태의 변화를 감지하여 UI를 업데이트하고 있습니다.

결론

useState 훅을 사용하면 간단하고 효율적으로 상태를 관리할 수 있으며, 이를 이용하여 앱의 UI와 데이터의 상호작용을 단순화할 수 있습니다.

더 많은 정보를 원하시면 Flutter 공식 문서를 참고하시기 바랍니다.