10-1. StatefulWidget (flutter)

Widget 이론

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

StatelessWidget 라이프 사이클(Life Cycle) - 상태 관리 불가

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

1. Constructor로 생성
2. State를 생성
3. State를 초기화
4. didChangeDependencies 함수를 부름
5. dirty로 상태 변화
6. build 함수를 부름
7. clean 으로 상태 변화
8. deactivate 가 불리고 (거의 사용하지 않음)
9. dispose 가 이어서 불리면서 삭제(주로 사용)

기존의 StatefulWidget은 삭제

1. Constructor로 생성
2. 기존 State를 찾아감
3. didUpdateWidget 함수를 부름(State 상태는 clean)
4. dirty로 상태 변경
5. build 실행
6. clean 상태로 변경

1. 내부에서 setState를 실행
2. dirty 상태로 변경
3. build 실행
4. clean 상태로 변경

StatelessWidget 을 StatefulWidget 으로 변경 하기

class HomeScreen extends StatelessWidget {
  final Color color;

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50.0,
      height: 50.0,
      color: color,
    );
  }
}

상태관리가 가능한 StatefulWidget로 변경

class HomeScreen extends StatefulWidget {
  final Color color;
  const HomeScreen({super.key, required this.color});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50.0,
      height: 50.0,
      color: widget.color,
    );
  }
}