Flutter - Stateful widgets

Stateful widget의 정의

• 데이터가 변경될 때 변화를 UI에 반영하여 실시간으로 볼 수 있다.
• stateless widget은 변경되지 않을 UI를 출력만 한다.

Stateful widget의 구성

stateful widget은 두 가지 부분으로 구성된다.
1.위젯 그 자체
2.위젯의 상태

• 위젯에 들어갈 데이터와 UI를 넣는 곳, 데이터가 변경되면 UI도 변경된다.
• 데이터는 Dart의 Class Property

Stateful widget 생성하기

stateful widget은 위젯 생성시 정의하거나, 혹은 code Action을 통해서 stateless에서 stateful로 전환할 수 있다.

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

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

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  int counter = 0;
  // 아이콘이 클릭되었을 때 실행할 함수 - 반환값 없음 (void)
  void onClicked() {
    counter = counter + 1;
  }

  //build 입력 후 엔터를 치면 build 메서드가 자동완성 된다.
  @override // 부모 class에 이미 있는 메소드를 override 한다
  Widget build(BuildContext context) {
    //Buildcontext는 일단 무시하기
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal[800],
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center, // 텍스트를 화면 가운데 정렬
            children: [
              Text(
                'Click Counter',
                style: TextStyle(
                  fontSize: 40,
                  color: Colors.white,
                  fontWeight: FontWeight.w500,
                ),
              ),
              Text(
                '$counter',
                style: TextStyle(
                  fontSize: 50,
                  color: Colors.red[400],
                  fontWeight: FontWeight.w500,
                ),
              ),
              IconButton(
                onPressed: onClicked,
                icon: Icon(
                  Icons.add_box_rounded,
                  color: Colors.white,
                  size: 60,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

강의를 가이드로 삼아, statless 위젯 사용법도 익힐 겸 내 입맛대로 카운터 화면을 만들어 보았다.

그런데 이 상태로는 아무리 + 아이콘을 클릭해도 counter 횟수가 올라가지 않는다. 무엇이 문제일까?

📌setState 함수

• State 클래스에게 데이터가 변경되었다고 알리는 함수 (야 여기 새 데이터 있어! 라고 알려줘야 함)
• setState함수 안에 counter를 넣어도 되고, counter를 증가시킨 다음 setState 함수를 사용해 State 클래스에게 데이터에 변화가 있음을 알려도 된다. 가독성을 위해서 전자의 방법을 주로 사용한다.

1. setState 함수 안에 counter 변수를 넣기

  void onClicked() {
    setState(() {
      counter = counter + 1;
    });
  }

2. counter 변수를 증가시킨 후 setState 함수를 이용하여 State 클래스에게 데이터에 변화가 있음을 알리기

  void onClicked() {
    counter = counter + 1;
    setState(() {});
  }

두 경우 모두 + 아이콘을 클릭했을 때 counter 숫자가 정상적으로 증가함을 확인하였다.

📝논의 및 고찰

IconButton - Flutter 가 제공한다.
onPressed에는 아이콘이 클릭될 때마다 실행될 함수를 할당하고,
icon에는 아이콘을 할당한다.
플러터에서는 Icon 키워드를 통해 기본 제공하는 아이콘에 접근하고, 사용할 수 있다. (리액트 할 때 벡터나 svg 이미지 웹에서 다운로드받아서 사용했던 거 생각하면 진짜 편한 기능인듯. 개발자 친화적이라는 말이 뭔지 알겠다.)

• 헷갈렸던 부분 이어서 정리할 것!