initState

하요·2024년 7월 3일

알아두면 쓸모있는 Flutter 지식

목록 보기

3/7

Flutter에서 초기 상태 설정과 데이터 로드하기: initState

initState는 StatefulWidget의 상태가 초기화될 때 호출되는 메서드입니다. 이 메서드는 위젯의 생명 주기에서 중요한 역할을 하며, 상태 초기화, 데이터 로드 및 설정 작업을 수행하는 데 사용됩니다.

주요 속성

정의: initState는 State 객체가 처음 생성될 때 한 번 호출되는 메서드입니다.
역할: 상태 초기화, 초기 데이터 로드, 컨트롤러 설정 등 초기 설정 작업을 수행합니다.
비동기 작업: initState는 동기적으로 실행되어야 하며, 비동기 작업은 별도의 메서드에서 처리해야 합니다.

주요 활용도

상태 초기화: 상태 변수를 초기화합니다.
초기 데이터 로드: 네트워크 요청 또는 데이터베이스 쿼리를 통해 초기 데이터를 로드합니다.
컨트롤러 설정: TextEditingController나 AnimationController와 같은 컨트롤러를 설정합니다.

코드 예제

기본 예제

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    // 초기 상태 설정
    _counter = 10;
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('Counter: $_counter'),
          ElevatedButton(
            onPressed: _incrementCounter,
            child: Text('Increment'),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('initState Example')),
      body: MyStatefulWidget(),
    ),
  ));
}

비동기 작업 예제

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  String _data = '';

  @override
  void initState() {
    super.initState();
    _loadData();
  }

  Future<void> _loadData() async {
    // 비동기 데이터 로드 작업
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      _data = 'Loaded Data';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(_data.isEmpty ? 'Loading...' : _data),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Async initState Example')),
      body: MyStatefulWidget(),
    ),
  ));
}

주요 활용도

상태 초기화: initState 메서드에서 상태 변수를 초기화합니다.
데이터 로드: 초기 데이터를 로드하거나 비동기 작업을 수행합니다.
컨트롤러 설정: TextEditingController 또는 AnimationController와 같은 컨트롤러를 설정합니다.

추가 팁

비동기 작업: initState는 동기적으로 실행되므로, 비동기 작업은 별도의 메서드에서 수행합니다.
super.initState() 호출: initState를 재정의할 때는 항상 super.initState()를 호출하여 부모 클래스의 초기화 로직을 실행합니다.
setState 사용: 비동기 작업이 완료된 후에는 setState를 사용하여 상태를 업데이트하고 UI를 다시 빌드합니다.