[Flutter] 10. 상태

1. 뭐라고하냐

Flutter에서 그림(UI)는 항상 데이터를 기반으로 그려진다.
이때 말하는 데이터는 오브젝트, 조금 더 자세하게 말하자면 오브젝트가 가진 객체의 상태를 의미한다. 
모든 오브젝트는 상태를 가지며, 이 상태가 변할 수 있는지 여부가 중요한 기준이 된다.

상태는 있지만 변하지 않으면 불변이다.
예를 들어, 생성자에서 값이 정해지고 이후에 바뀌지 않는다면 그것은 불변 상태라고 할 수 있다.
반면 setter가 존재하여 외부에서 값을 바꿀 수 있다면 상태는 가변이다.

즉, 상태가 존재하는 것과 그 상태가 바뀔 수 있는지는 다른 문제이다.
Flutter에서 중요한 것은 상태가 변하느냐이며, 상태가 변하면 그림도 다시 그려진다.

이런 구조 때문에 Flutter에서는 상태가 변하는지에 따라 Stateless와 Stateful로 나뉜다.
상태가 있지만 변하지 않으면 Stateless, 상태가 있고 변할 수 있으면 Stateful이라고 한다.

정리하자면, 모든 오브젝트는 상태를 가지고 있고, 
그 상태가 변할 수 있느냐에 따라 그림을 다시 그릴지 말지가 결정된다.
setter가 없으면 상태는 불변이고, 그림은 유지된다.
setter가 있으면 상태가 변할 수 있고, 그림은 다시 그려진다.

Flutter는 이런 식으로 상태를 기반으로 그림을 다시 그리는 구조를 가진다.
그림을 다시 그린다는 것은 곧 비용이 발생하는 작업이다.
그래서 상태를 잘 나누고, 변하지 않는 값들은 불변으로 유지하는 것이 중요하다.

2. 상태 관리 1 (1)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int num = 1;

  @override
  Widget build(BuildContext context) {
    print("rebuild 됨");
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text("${num}", style: TextStyle(fontSize: 50)),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          num = num + 1;

          setState(() {}); // rebuild
        },
      ),
    );
  }
}

Build

행위

행위 전달 방식 3가지

함수를 전달하는 3가지 방법 (1) - 익명함수

함수를 전달하는 3가지 방법 (2) - 이름이 있는 함수

함수를 전달하는 3가지 방법 (3) - 1. 매개변수가 있을 때 함수 자체를 전달

함수를 전달하는 3가지 방법 (3) - 2. 매개변수가 없을 때 함수 자체를 전달

setState()로 rebuild하기

Context

전체 코드

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 1. 상태
  int num = 1;

  // 2. 행위
  void increase() {
    num++;
    print("num : $num");
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    print("rebuild 됨");
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text("${num}", style: TextStyle(fontSize: 50)),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: increase,
      ),
    );
  }
}

3. 상태 관리 1 (2)

직접 코드 작성해보기

4. 상태 관리 2

전체 코드

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

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

class MyApp extends StatelessWidget {
  const MyApp();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int num = 1;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            Expanded(
              child: Container(
                color: Colors.red,
                child: Align(
                  child: Text(
                    "${num}",
                    style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 100, decoration: TextDecoration.none),
                  ),
                ),
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.blue,
                child: Align(
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
                    onPressed: () {
                      num++;
                      setState(() {});
                    },
                    child: Text(
                      "증가",
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 100,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}