핫 리로드는 상태를 유지한다

Coddy Flutter 여정의 앱에 상호작용 추가하기 섹션에 포함된 레슨. 34개 중 14번째.

미리 보기에서 변경 사항을 적용하는 방법은 두 가지입니다. Run은 앱을 처음부터 시작합니다. Hot reload는 앱이 계속 실행되는 동안 새 코드를 적용하고 State를 유지합니다. 카운터의 숫자도 그대로 유지됩니다.

직접 해 보세요. 더하기 버튼을 몇 번 누르고, 숫자의 색을 바꾼 다음 Hot reload를 누르세요. 새 색상이 표시되고 횟수는 그대로 남아 있습니다. 화면 스타일을 지정할 때, 이렇게 하면 원하는 위치까지 다시 버튼을 누를 필요가 없습니다.

Hot reload는 새 코드로 화면을 다시 만들지만 새 State를 만들지는 않습니다. 따라서 시작 값을 int _count = 0;에서 int _count = 10;으로 바꾸어도 표시되지 않습니다. 이 줄은 State가 만들어질 때만 실행되기 때문입니다. 변경 사항을 확인하려면 Run을 누르세요.

main의 경우와 StatelessWidget을 StatefulWidget으로 바꾸는 경우도 마찬가지입니다. Hot reload 후 변경 사항이 표시되지 않으면 Run을 누르세요.

챌린지

쉬움

숫자 크기를 64로 하고 색상을 Colors.deepPurple로 설정하세요. 먼저 더하기 버튼을 몇 번 누른 다음 핫 리로드를 사용하고 숫자가 그대로 유지되는지 확인하세요.
카운터가 10에서 시작하도록 하세요. 핫 리로드에서는 해당 값이 표시되지 않지만 실행하면 표시되는 것을 확인하세요.

직접 해보기

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(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

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

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

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

  void _increase() {
    setState(() {
      _count++;
    });
  }

  void _decrease() {
    setState(() {
      _count--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            IconButton(icon: Icon(Icons.remove), onPressed: _decrease),
            Text('$_count', style: TextStyle(fontSize: 48)),
            IconButton(icon: Icon(Icons.add), onPressed: _increase),
          ],
        ),
      ),
    );
  }
}