[Flutter 기본 개념] 플러터 StatefulWidget에 대해서

Widget이론

• Widget은 모두 “불변”의 법칙을 갖고 있다.
• 하지만 위젯의 값을 변경해야할 때가 있다.
• 변경이 필요하면 기존 위젯을 삭제해버리고 완전 새로운 위젯으로 대체한다.

마치 React의 State에 대한 Component Rendering같다.

StatelessWidget의 라이프 사이클(Life Cycle)

• Constructor로 생성이 되고 생성읻 되자마자 build함수가 실행됨
• 이전 Container예제와 마찬가지로 변경이 필요하면 새로운 위젯을 만들어버린다.
• 하나의 StatelessWidget은 라이프 사이클동안 단 한번만 build 함수를 실행한다.

StatefulWidget의 라이프 사이클

StatefulWidget또한 위젯이기 때문에 불변이다.

따라서 State를 이용하여 변화를 구현한다.

아무 것도 변경되지 않았을 때.

• dirty는 변경이 필요한 상태임.
• clean은 변경 이후의 상태임.
• 삭제할 때 deactivate가 호출 됨.
• 이후 dispose가 호출 됨.

파라미터가 바뀌었을 때. (생성자 파라미터)

• 새로운 Widget
• Contructor가 호출 됨
• createState가 아니라 기존 State를 찾고, binding함.
• (기존 clean) → didUpdateWidget → dirty → build

setState를 실행했을 때. (내부에서 실행)

• Widget 유지
• setState 실행
• dirty 실행
• build 실행
• clean 실행.

Dispose

StatefulWidget은 화면에서 사라질 때 dispose되어야 한다. 만약 화면에서 사라져도 State를 유지하고 싶다면, 상태관리패턴을 사용해야한다.

실습

StatefulWidget은 State와 세트이다.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class HomeScreen extends StatefulWidget {
  final Color color;

  const HomeScreen({required this.color, Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _HomeScreenState();
  }
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50.0,
      height: 50.0,
      color: widget.color, // State에 widget이라는 변수가 있음.
    );
  }
}

State에서 StatefulWidget의 변수를 사용하고 싶으면 widget을 사용한다.

단축키

StatelessWidget에서 StatefulWidget으로 ShowContext(Alt+Enter)를 이용하면 쉽게 변경이 가능함.