작성하면서 참고한 글, 영상
플러터를 위한 다트 언어
[ Flutter / 플러터 ] StatefulWidget 가장 기본이 되는 라이프 사이클 이해하기!
Stateful Widget Lifecycle(생명주기)
머리글
Flutter를 개발하면서 가장 의문스러웠던 부분이었다.
공부한 책에서는 StatelessWidget과 StatefulWidget의 차이는 화면을 갱신할 수 있느냐 없느냐의 차이라고만 설명할 뿐, 왜 이런 차이가 나는지 명확하게 정리된 내용이 없어서 이해하는데 어려웠다.
때문에, 두 가지 Lifecycle의 차이를 몰라 server로부터 데이터를 받아올 경우,
어떤 경우는 제대로 실행되는 반면, 통신이 끝나고 나서 widget에서 context를 받아오지 못해 오류가 발생하는 경우의 차이점을 몰라서 많은 시도를 해보았던 기억이 있어, 이를 간단하게 정리해 보았다.
1. StatelessWidget? StatefulWidget?
Flutter의 Widget은 StatelessWidget 혹은 StatefulWidget를 상속받아 사용하는데,
이는 화면을 갱신할 수 있느냐 없느냐의 차이. 정확하게는 Widget Lifecycle의 차이 때문에 나누어진다.
2. StatelessWidget
StatelessWidget은 Widget이 생성된 이후, 단 한 번만 그려진다.
Lifecycle은 Constructor > build() 순으로 진행되며
StatefulWidget에서 사용되는 setState와 같은 함수들을 사용할 수 없다.
이 때문에, Widget에 사용되는 변수가 변경되어도, 화면에는 반영되지 않는다.
StatelessWidget에서 버튼을 클릭해 conuter변수를 증가시키는 함수를 호출하면 print되는 값은 변화하지만, Widget에 표현된 값은 변함이 없다.
이런 특징으로 인해 StatefulWidget보다 자원을 덜 소모한다는 장점이 있지만,
Widget의 변경이 실시간으로 사용자에게 표현되지 않는다는 단점이 있다.
3. StatefulWidget
StatefulWidget은 Widget이 생성된 이후, 여러 호출에 의해 여러 번 그려질 수 있다.
Widget이 처음 생성될 경우,
Lifecycle은 Constructor > createState > initState() > didChangeDependencies() > Bild()
순으로 진행된다.
3-1. initState, didChangeDependencies
둘 다 Widget이 최초 생성될 경우 단 한 번만 실행된다는 특징이 있지만, 실행 순서에 따른 context의 사용 가능 여부에 따른 차이가 있다.
context란? Widget이 Widget Tree에서의 현재 위치를 알 수 있는 정보
initState는 함수내에서 context사용이 불가능하지만,
didChangeDependencies는 context사용이 가능하다.
때문에 initState에서는
1. 부모 위젯에 상속받은 속성을 초기화하거나
2. Listener와 같이 한 번만 호출할 필요가 있거나, 실행하는데 자원 소모가 큰 함수
를 실행하는 것이 좋다.
didChangeDependencies에는
1. context를 사용하는, Widget의 크기를 초기화하는 함수나
2. Api호출을 통해 결괏값을 출력해야 하는(Dialog, Snackbar, Overlay)경우
3. initState에서 실행하지 못한 자원 소모가 큰 함수
를 실행하는 것이 좋다.
3-2. setState()
setState()는 Widget의 상태변화를 위한 함수로, 동적인 페이지 표현을 위해 위젯에 변화가 있음을 알린다.
매번 호출할 수 있지만, 그때마다 setState() > Build()순으로 Lifecycle이 진행된다.
StatefulWidget에서 버튼을 클릭해 conuter변수를 증가시키는 함수를 호출하면 setState를 통해 _conter가 변화되고 Build()가 다시 호출되면서 Widget에 표현된 값이 변화한다.
3-3. didUpdateWidget()
해당 Widget의 부모 Widget에서 변경이 일어날 때 실행된다.
Constructor > didUpdateWidget() > Build()순으로 Lifecycle이 진행된다.
3-4. Build()
StatefulWidget의 Build()는 위 세 가지 사례마다 매번 호출되기 때문에
가장 자주 사용되어, 이곳에 기능을 추가할수록 앱의 속도가 줄어든다.
StatefulWidget은 Build()가 호출될때마다 다시 StatelessWidget을 생성하므로 Widget의 변경이 실시간으로 사용자에게 표현된다는 장점이 있지만,
이런 특징으로 인해 StatefulWidget보다 자원을 더 소모한다는 단점이 있다.
