StatefulWidget 2 설명

Jan 13, 2025

Contents

StatefulWidget 1에서 봤던 코드입니다. context를 나누려는 이유

StatefulWidget 1에서 봤던 코드입니다.


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("MyApp build....");

    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
// createState() 직접적으로
}

class _HomePageState extends State<HomePage> {
  int num = 1; // statefulW 이 된 순간 상태를 저장하고 있다.
  // 변경이 되면 리로드를 한다.

  // 빌드를 직접 호출할 수 있는 방법은 없다.
  @override
  Widget build(BuildContext context) {
    print("HomePage build....");

    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: Container(
                child: Text(
                  "$num",
                  style: TextStyle(fontSize: 50),
                ),
              ),
            ),
          ),
          Expanded(
            child: Center(
              child: Container(
                child: ElevatedButton(
                    onPressed: () {
                      num++;
                      setState(() {});
                      print("num: $num");
                    },
                    child: Icon(Icons.add)),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

context를 나누려는 이유

모든 것이 하나의 컨텍스트에 묶여있어서, 리로드할 때 페이지 전체가 리로드되어

통신에 부담이 생긴다.

⇒ 컨텍스트를 나눌 필요가 있다.

해당 코드에서 context를 나눠보도록 하겠습니다.

위 코드에서 context는 몇개나 나올지 이미지를 보여드리겠습니다.

MyApp(빨간색) 1개 , HomePage(주황색) 1개, 상단+하단 Container 2개 ⇒ 총 4개가 나올 수 있습니다.

여기서 상단과 하단 컴포넌트를 각각의 context를 만들어 주겠습니다.

StatelessWidget 이었던 HomePage를 StatefulWidget으로 바꿔줍니다.

stl에서는 못보던 코드도 추가되었습니다.


return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: Container(
                child: Text(
                  "$num",
                  style: TextStyle(fontSize: 50),
                ),
              ),
            ),
          ),
          Expanded(
            child: Center(
              child: Container(
                child: ElevatedButton(
                    onPressed: () {
                      num++;
                      setState(() {});
                      print("num: $num");
                    },
                    child: Icon(Icons.add)),
              ),
            ),
          ),
        ],
      ),
    );

제일 먼저 HomePage 클래스에서 변수를 선언해놓아야 합니다.