상태 끌어올리기

Coddy Flutter 여정의 상태 관리 섹션에 포함된 레슨. 27개 중 4번째.

휴대폰에서 엄지손가락 버튼을 탭해 보세요. 버튼 옆의 숫자는 올라가지만 상단 바에는 여전히 0 likes라고 표시됩니다. 버튼은 자체 State에 개수를 저장하며, 다른 곳에서는 이 값을 볼 수 없습니다.

두 위젯에서 같은 값이 필요하다면, 두 위젯을 모두 포함하는 가장 가까운 위젯으로 상태를 끌어올리세요. 이를 상태 끌어올리기라고 합니다. 페이지가 likes를 소유하고, 버튼은 값을 받고 콜백을 전달받는 StatelessWidget이 됩니다:

LikeButton(
  likes: likes,
  onLike: () {
    setState(() {
      likes++;
    });
  },
)

이제 한곳에 개수가 하나만 있습니다. 상단 바와 버튼, 재설정 버튼은 모두 그 값을 읽고 변경하므로 서로 다른 값을 표시할 일이 없습니다.

간단한 확인 방법: 값이 두 곳에서 표시되거나 변경된다면, 그 값을 소유하는 위젯은 두 곳 모두보다 상위에 있어야 합니다.

챌린지

중급

페이지가 좋아요 수의 유일한 소유자가 되도록 하세요:

LikeButton을 두 개의 필드인 likes와 onLike 콜백을 가진 StatelessWidget으로 바꾸세요.
페이지가 자체 likes와 setState 내부에서 1을 더하는 onLike를 전달합니다.

그러면 상단 표시줄이 버튼을 따라 바뀌고, 새로 고침 버튼은 둘 다 초기화합니다.

직접 해보기

import 'package:flutter/material.dart';

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

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

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

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int likes = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('$likes likes'),
        actions: [
          IconButton(
            icon: const Icon(Icons.refresh),
            onPressed: () {
              setState(() {
                likes = 0;
              });
            },
          ),
        ],
      ),
      body: const Center(
        child: LikeButton(),
      ),
    );
  }
}

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

  @override
  State<LikeButton> createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton> {
  int likes = 0;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(
          icon: const Icon(Icons.thumb_up),
          iconSize: 40,
          onPressed: () {
            setState(() {
              likes++;
            });
          },
        ),
        Text('$likes', style: const TextStyle(fontSize: 32)),
      ],
    );
  }
}