[flutter] 플러터 훅 위젯에서의 상태 초기화 방법

21 Dec 2023

flutter

플러터(Flutter)에서 훅(hook)을 사용하는 경우, 상태를 초기화하고 관리하는 방법은 중요합니다. 이 기술 블로그에서는 플러터 훅 위젯에서의 상태 초기화 방법에 대해 알아보겠습니다.

1. 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 Scaffold(
      appBar: AppBar(
        title: Text('Flutter Hook Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Count:',
            ),
            Text(
              '${count.value}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => count.value++,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

위의 코드는 useState 훅을 사용하여 훅 위젯에서 상태를 초기화하는 예제입니다.useState 훅은 해당 변수의 초기값과 함께 사용됩니다.

2. useEffect 훅을 이용한 상태 초기화

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) {
    useEffect(() {
      // 상태 초기화 로직
      return () {
        // 클린업 로직
      };
    }, []);
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Hook Example'),
      ),
      body: Center(
        child: Text(
          'State initialized using useEffect',
          style: TextStyle(fontSize: 24.0),
        ),
      ),
    );
  }
}

위의 코드는 useEffect 훅을 사용하여 특정 조건을 만족할 때 상태를 초기화하는 예제입니다.

결론

이 기술 블로그에서는 useState와 useEffect 훅을 사용하여 플러터 훅 위젯에서의 상태 초기화 방법에 대해 알아보았습니다. 상태 초기화는 앱의 성능과 안정성에 중요한 요소이므로 신중하게 처리해야 합니다.

더 많은 정보를 원하시는 경우 공식 Flutter Hooks 문서를 참조하십시오.