
Widget란 본디 변하지 않는 불변의 법칙을 지닌다. 위젯들은 모두 값을 변경할 수 없는 상태를 가진다는 특징을 지닌다..
하지만, 코드를 작성하다보면 위젯의 상태를 변경해야 할 때가 온다.
만약 이렇게 파란색 상자를 보라색으로 바꾸고 싶다면,,
이럴 때에 우리는 어떻게 해야하는가요..
아무리 Stateful위젯이라도, Stateless위젯이라도 불변의 법칙을 깰 수는 없다.
less는 싹 다 지우고 냅다 새로운 위젯을 다시 만들어내고, 생명주기를 통해 알 수 있다.
두 위젯의 생명주기부터 보면 이해를 하기에 조금 더 수월하다.
여기서 말하는 생명주기는 해당 위젯의 탄생부터 죽음까지의 일대기를 보여주는 것이라고 생각하면 편하다.
Stateless는 Constructor과정에서 생성되고, build에서 작업을 진행한다. 그리고 끝.
여기서 중요한 점은, Stateless의 라이프사이클안에서 모든 과정이 단 한 번만 이루어진다는 점이다. build가 한 번만 가능하며, 때문에 만약 Stateless위젯으로 코드를 짰는데, 변경이 필요하게 되는 경우에는 위에서 말한대로 위젯을 삭제하고 새로운 위젯을 만들어버리는 방법을 사용한다.
dirty, clean, didchangeDependencies 등의 세부적인 주기가 더 있지만 일단은 이해를 돕기 위해서 조금 더 간략하게 만들었다.
먼저 Stateful에서 Constructor로 위젯을 생성하고, createState를 통해 State라는 위젯을 안에다가 새롭게 만들어준다. 이후에 State에서는 initState로 초기에 한 번 셋팅을 처리하고 build작업에 들어간다. 이후에 원한다면 dispose. 삭제되는 과정으로 생명주기가 진행된다.
Stateful위젯은 특이하게도 두개의 위젯을 가진다 Stateful과 State.
위젯을 변경하는 과정에서의 생명주기는 따로 있다.
다른 위젯에서 받아온 파라미터의 값을 변경하여 위젯을 사용하는 경우, 위와 같은 모습으로 진행이 된다. Stateful에서 파라미터를 받아 Constructor을 실행하고, 변경된 파라미터 값들을 가지고 Stateful가 생성될 때 함께 생성했던 State위젯을 한 번 더 빌드해준다.(didUpdateWidget라는 함수가 실행됨으로써 빌드)
setState를 활용하여 위젯 상태를 변경하는 경우의 라이프사이클은 아주 간단하다. 우선 선언된 setState함수가 실행되면서 상태의 값이 변경되고, 그 값들을 빌드한다.
class Less extends StatelessWidget {
const Less({Key? key}) : super(key : key);
Widget build(BuildContext context) {
return Container();
}
}
파라미터를 받아와서 그대로 실행한다.
이상하게 생겼다.
위에서 말한대로 createState로 State를 안에 또 만들어준다. 저기 _Fulstate가 바로 그 위젯이다.
얘는 안에 있기 때문에 ful에서 파라미터를 가져와서 그대로 쓰고 할 수가 없다. 그래서 widget.파라미터명;처럼 사용한다.
class Ful extends StatefulWidget {
const Ful({Key? key}) : super(key : key);
State<Ful> createState() = > _FulState ();
}
class _FulState extends State<Ful> {
Widget build(BuildContext context) {
return Container();
}
}
+추가꿀팁: stl, stf만 쳐도 Android Studio에서 자동완성으로 해당 구조를 만들어줌
+StatefulWidget, StatelessWidget를 클릭해서 오른쪽 마우스 누르면 자동완성으로 ful->less, less->ful로 변경해주는 기능 있음
위의 생명주기를 토대로 둘의 차이점을 나열해보자면,
기본적으로 상태가 계속해서 변화한다면 Stateful을 써야하긴 하지만, 만약 그렇지 않다면 기왕이면 Stateless를 쓰는 것이 프로그램을 조금 더 가볍고 보기 좋게 만들 수 있는 방법이다.
따라서, 한 화면 안에서도 Stateful을 사용해야하는 부분과 그렇지 않은 부분을 잘 분류해서 코드를 작성하면 좋다.