Flutter LifeCycle 중 StatelessWidget과 StatefulWidget 알아보기

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출! 강의을 참고하여 작성하였습니다.

 

Android, iOS 개발 하기전 LifeCycle 에 대해서 알아야 Memory Leak 방지 및 사용자 액션에 따른 UI 구성을 구현할 수 있습니다. Flutter을 배우는 입장에서 Flutter의 LifeCycle 또한 알아야할 필수 코스라고 생각됩니다. 이번 시간은 Flutter Life Cycle 에 대해서 알아보겠습니다.

 

Widget의 이론

Flutter에서 사용하는 Widget은 불변의 법칙을 갖고있습니다. 따라서 Widget의 변경 필요시 기존 위젯 삭제하고 완전 새로운 위젯으로 대체 합니다.

 

StatelessWidget LifeCycle

Constructor 생성되고 build 함수가 실행됩니다.

여기서 Build는 최초 생성될 때 한번만 호출 됩니다. UI 가 업데이트가 안된다면 build을 통한 업데이트가 되어야할 경우인지 체크할 필요가 있습니다. Build을 호출하지 않아서 업데이트가 안되는 case 가 있습니다.

 

StatefulWidget LifeCycle

기본적인 Stateful Widget 의 LifeCycle입니다. 아래 Flow 를 보면 StatefultWidget이 State 를 생성하는 것을 알 수 있습니다. 
State 에서는 dirty 상태일 때 build 가 처리되는 것을 확인 할 수 있습니다.

 

생성 후 Parameter 변경 시점 LifeCycle

파라미터가 변경하게 되면 기존 위젯이 존재하여도 위젯은 새로 생성됩니다. 그후 생성된 state 를 찾아서 재사용하는데 이때 didUpdateWidget을 호출합니다. dirty build clean 순으로 업데이트가 됩니다.

 

 

setState 실행했을 때 LifeCycle

build을 실행 하기 위해서는 setState() 을 호출해야하는데요. setState는 clean 상태일 때만 실행할 수 있습니다.
setState을 실행하게되면 dirty build clean 순으로 업데이트가 됩니다.

 

 

전체적은 Flow 그림은 다음과 같이 표현할 수 있습니다.

 

 

StatefulWidget 표현하기

StatefulWidget을 사용하기 위해서는 StatelessWidget과 동일하게 상속을 받으면됩니다.
여기서 StatelessWidget과 차이점은 State 을 선언해줘야합니다.

StatefulWidget을 extends 을 하게 되면 creatState()를 override 해줘야합니다. createState()의 return type 이 State<StatefulWidget> 입니다.

State을 생성하는 방법은 간단합니다. State<T> 을 extends 을 하면됩니다. State는 build 를 override 해주어야합니다.

class HomeScreen extends StatefulWidget {
  final Color color;

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

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

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

 

💡[팁] stful 을 입력하면 빠르게 StateFulWidget을 생성할 수 있습니다.

 

마무리

Flutter의 LifeCycle 에 대해서 알아봤습니다. StatelessWidget과 StatefulWidget의 차이를 명확히 알고 간다면 Flutter 작업하는데 많은 도움이 될 것으로 생각됩니다.

 

참고

코드팩토리 강의