[flutter] 플러터 훅 위젯과 상태 저장 방법

21 Dec 2023

flutter

플러터(Flutter)에서 훅(Hook)은 상태 관리와 라이프사이클 관리를 보다 효율적으로 할 수 있게 해주는 기능이다. 이 기능은 함수형 컴포넌트의 생산성을 향상시키고, 코드의 재사용성을 높여준다. 이번 글에서는 플러터 훅 위젯을 사용하는 방법과 해당 위젯의 상태를 저장하는 방법에 대해 알아보겠다.

1. 플러터 훅 위젯이란?

훅(Hook) 은 플러터에서 제공하는 상태와 라이프사이클 관리 기능이다. 이를 사용하면 StatefulWidget을 구현하지 않고도 상태와 라이프사이클을 효율적으로 관리할 수 있다.

2. 상태 저장 방법

플러터 훅 위젯을 사용하여 상태를 저장하기 위해선 useState 함수를 이용한다. 이 함수를 사용하면 상태 저장을 간단하게 처리할 수 있다.

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

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

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

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Hook Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '${count.value}',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            count.value++;
          },
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

위 코드에서 useState 함수를 사용하여 count 변수를 선언하고, 해당 변수를 상태로 사용한다. 버튼을 누를 때마다 count.value 값이 증가하게 된다.

이처럼 플러터 훅 위젯을 사용하여 상태를 효율적으로 저장하고 관리할 수 있다.

결론

플러터 훅 위젯은 상태와 라이프사이클 관리를 보다 간편하게 처리할 수 있는 강력한 도구이다. useState 함수를 이용하여 상태를 저장하고, 해당 상태를 필요한 곳에 적용함으로써 코드의 간결성을 유지할 수 있다. 효율적인 상태 관리를 위해 플러터 훅 위젯을 적극적으로 활용해보자.

여기에서 더 많은 정보를 확인할 수 있다.