지난 글에서 StatelessWidget은 받은 값으로 그리기만 하고 스스로 값을 바꾸지 않는다고 했다. 그럼 버튼을 누를 때마다 숫자가 올라가는 화면은 어떻게 만들까? Compose 하던 습관대로 일단 StatelessWidget 안에 변수를 두고 올려보자.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    int count = 0; // 여기서 문제

    return Column(
      children: [
        Text('$count'),
        ElevatedButton(
          onPressed: () {
            count++; // 값은 올라가는데...
            print(count);
          },
          child: const Text('+1'),
        ),
      ],
    );
  }
}

버튼을 눌러도 화면의 숫자는 계속 0이다. 콘솔에는 1, 2, 3이 찍히는데 화면은 안 바뀐다. 값은 분명히 올라가는데 왜 화면은 그대로일까?

원인: Flutter는 "값이 바뀌었다"는 걸 스스로 알아채지 못한다

Compose는 mutableStateOf 값이 바뀌면 그 값을 읽는 곳을 자동으로 다시 그려준다. Flutter는 일반 변수가 바뀌는 걸 감시하지 않는다. count++는 그냥 메모리의 숫자만 바꿀 뿐이라, 화면을 다시 그려달라는 신호를 직접 보내야 한다.

또 하나, build 안에서 int count = 0;을 선언했으니 build가 다시 실행될 때마다 count는 또 0으로 시작한다. 설령 화면이 다시 그려져도 값이 유지되지 않는다. 값을 build 밖에 보관할 곳이 필요하다.

해결: StatefulWidget - 값을 보관하는 State 객체를 따로 둔다

class Counter extends StatefulWidget {
  const Counter({super.key});

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0; // build 밖에 보관

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('$count'),
        ElevatedButton(
          onPressed: () {
            setState(() {
              count++;
            });
          },
          child: const Text('+1'),
        ),
      ],
    );
  }
}

이제 버튼을 누를 때마다 숫자가 올라간다. 구조가 두 덩어리로 나뉘었다.

• Counter (StatefulWidget): 위젯 자체. 불변이고, createState()로 State를 만들어 줄 뿐이다
• _CounterState (State): 값을 실제로 들고 있는 객체. count가 여기 있고, build도 여기 있다

위젯은 바뀔 때마다 새로 만들어지지만, State 객체는 화면에 붙어 있는 동안 계속 살아 있어서 count가 유지된다. 클래스 이름 앞에 _가 붙은 건 생성자 글에서 본 대로 이 파일 안에서만 쓰겠다는 표시다.

setState가 하는 일

setState(() {
  count++;
});

setState는 "State 안의 값이 바뀌었으니 build를 다시 실행해서 화면을 갱신해라"는 신호다. 괄호 안 람다에서 값을 바꾸고, 그 직후 Flutter가 build를 다시 부른다. 3번 글에서 배운 콜백을 넘기는 형태다.

setState 없이 값만 바꾸면 어떻게 될까?

onPressed: () {
  count++; // setState 없음
},

count는 올라가지만 build가 다시 불리지 않아서 화면은 그대로다. 처음 증상과 똑같다. 그래서 Flutter에서는 화면에 보이는 값을 바꿀 때는 setState 안에서 바꾼다가 기본 규칙이다.

위젯 생명주기: initState와 dispose

State 객체는 만들어지고 사라지는 시점이 있고, 그 시점에 호출되는 메서드가 있다.

class _CounterState extends State<Counter> {
  int count = 0;

  @override
  void initState() {
    super.initState();
    print('State 생성됨'); // 처음 한 번만 실행
  }

  @override
  void dispose() {
    print('State 제거됨'); // 화면에서 사라질 때 실행
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    print('build 실행'); // setState 때마다 실행
    return Text('$count');
  }
}

build는 자주 실행되니 무거운 작업을 넣지 않는다. 서버 요청 같은 건 한 번만 하면 되니 initState에서 한다. late final을 initState에서 채우는 패턴이 여기서 쓰인다. initState가 build보다 항상 먼저 실행된다는 걸 Flutter가 보장하기 때문에, 지난 글에서 말한 "채우는 코드가 읽는 코드보다 먼저 실행되는 순서"가 자동으로 지켜진다.

late final TextEditingController controller;

@override
void initState() {
  super.initState();
  controller = TextEditingController(); // build보다 먼저 채워짐
}

@override
void dispose() {
  controller.dispose(); // 쓴 건 정리
  super.dispose();
}

super.initState()는 먼저, super.dispose()는 마지막에 부르는 게 관례다.

Compose, SwiftUI와 비교하면

// Compose
@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    Column {
        Text("$count")
        Button(onClick = { count++ }) { Text("+1") }
    }
}

// SwiftUI
struct Counter: View {
    @State private var count = 0
    var body: some View {
        VStack {
            Text("\(count)")
            Button("+1") { count += 1 }
        }
    }
}

가장 큰 차이는 갱신을 내가 직접 알려야 한다는 점이다. Compose와 SwiftUI는 상태가 바뀌면 자동으로 다시 그리는데, Flutter는 setState를 빼먹으면 화면이 안 바뀐다. 입문 때 가장 많이 겪는 실수다.

정리

• 일반 변수는 값이 바뀌어도 Flutter가 알아채지 못해서, 화면에 보이는 값은 StatefulWidget의 State에 보관한다
• StatefulWidget은 불변인 위젯이고, 값은 계속 살아 있는 State 객체가 들고 있다
• 값을 바꿀 때는 setState(() { ... }) 안에서 바꿔야 build가 다시 실행되어 화면이 갱신된다
• initState는 한 번만, build는 setState마다, dispose는 제거될 때 실행되므로 초기 세팅과 정리는 거기서 한다
• Compose·SwiftUI는 자동 갱신이고 Flutter는 setState를 직접 호출한다는 점이 가장 큰 차이다

다음 글에서는 Row, Column, Stack, Expanded 같은 레이아웃 위젯을 다뤄보겠다.