플러터 기본기 다지기 - StatefulWidget과 StatelessWidget 알아 보기

• StatelessWidget: 상태를 관리하지 않는 정적 위젯
• StatefulWidget: 상태를 관리하는 동적 위젯

StatefulWidget과 StatelessWidget 코드 작성의 차이

• StatelessWidget은 상속받은 위젯은 build() 함수를 재정의하여 위젯을 생성함
• Android Studio에서 stless라고 친 후, 텝키를 누르면 자동 템플릿 생성
• StatelessWidget: 상태를 관리하지 않는 정적 위젯
• StatefulWidget: 상태를 관리하는 동적 위젯

StatefulWidget과 StatelessWidget 코드 작성의 차이

• StatelessWidget은 상속받은 위젯은 build() 함수를 재정의하여 위젯을 생성함
• Android Studio에서 stless라고 친 후, 텝키를 누르면 자동 템플릿 생성

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 여기에 위젯 설정 추가
    );
  }
}

• StatefulWidget은 상속받는 위젯이 createState 메서드로 State 객체를 리턴하고,
• State는 상속받는 객체가 build 메서드로 Widget을 리턴하는 형태
• Android Studio에서 stf라고 친 후, 텝키를 누르면 자동 템플릿 생성

State 객체 이름 앞에 자동으로 언더바(_)를 붙이는데, dart에서 클래스나 프로퍼티, 메서드 앞에 언더바를 붙이면 private를 의미

private로 선언된 메서드/속성은 클래스의 경우 해당 파일에서만, 프로퍼티와 메서드는 해당 클래스에서만 접근할 수 있음!

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
} // end of MyApp

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

setState 메서드

• StatefulWidget에게 상태가 변경되었다고 알리는 메서드
• 내부적으로 build 메서드를 다시 호출하여 화면 상태 업데이트
• 비동기 코드 실행할 수 없기 때문에 setState 실행 전 모든 비동기 코드를 완료해야 함
• 아래 코드에서는 버튼을 클릭하면 숫자가 올라가고, setState()가 이를 Flutter 프레임워크에 알려주면, build() 메서드를 재실행
  • 변경된 _counter 값이 반영되어 화면에 표시됨

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp6> createState() => _MyApp6State();
} // end of MyApp6

// _ private 을 의미한다. --> dart public, private 만 사용
class _MyApp6State extends State<MyApp6> {
  // 멤버 변수
  int _count = 0;

  int get count => _count; // private 변수

  @override
  void initState() {
    super.initState();
    // 객체가 메모리에 올라 올때 단 한번만 수행 시키는 메서드
    print('initState()  메서드 호출');
  }

  // 멤버 메서드
  @override
  Widget build(BuildContext context) {
    // 지역 변수
    print('build() 메서드 호출');
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              setState(() {
                _count++;
                print("_count : $count");
              });
            },
            child: Text('$_count'),
          ),
        ),
      ),
    );
  }
}