[Flutter] StatefulWidget 이론

Widget 이론

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

 

StatelessWidget 라이프 사이클 (Life Cycle)

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

 

StatefulWidget 라이프 사이클 (Life Cycle)

• Constructor가 불린후 createState가 실행된다.
• 우선 클래스의 생성자가 실행된다. 그 후 createState라는 함수가 실행된다. (stateless 위젯은 build함수 실행)
• State에서 constructor는 중요한 것이 아니다..
• initState또한 State가 생성될 때 build함수처럼 절대적으로 단 한번만 실행된다.

 

• 파라미터(ex_ 빨->파)가 바뀌어도 기존 위젯을 삭제되고 새로 위젯이 constructor에 생성되지만, 이 새롭게 생성된 위젯은 기존에 사용중이던 State에 재활용하게 된다.
• 즉, 기존 위젯은 삭제되고, 새로운 위젯의 constructor가 실행되지만 createState는 실행되지 않는다. (2번 과정 참고)
• 생성자가 실행되면, 기존에 빨간색 컨테이너가 갖고있던 State에 그대로 붙어버린다.즉, 원래 있던 State를 재활용하게 된다. 그 다음엔 4,5,6 과정을 순서대로 진행하며 build를 진행한다.

• setState는 StatefulWidget을 생성하면 특별하게 실행할 수 있는 함수이다.
• 이는 State 클래스 내부에서 직접 실행할 수 있다.
• 보통은 인스턴스를 만들면서 파라미터로 외부에서 참조하게끔 했는데, 이는 내부에서 직접 참조할 수 있게 된다.
  
  

StatefulWidget 실습

• 단축키 stful 로 StaetfulWidget 빠른 생성 가능

class HomeScreen extends StatefulWidget {
  final Color color;

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

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

// state 재사용한다. constor 는 생성할 때 호출하므로 생성자를 받아 처리는 X !
class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
    width: 50.0,
    height: 50.0,
    color: widget.color, // 제네릭으로 받은 Object 을 가져오는 것은 Widget 을 사용할 수 있다.
    );
}

 

 

 

 

강의 출처 ; 코드 팩토리 인프런 강의