StatefulWidget and StatelessWidget

Theo·2023년 11월 5일

Flutter

목록 보기
1/2
post-thumbnail

StatefulWidget and StatelessWidget

Widget란 본디 변하지 않는 불변의 법칙을 지닌다. 위젯들은 모두 값을 변경할 수 없는 상태를 가진다는 특징을 지닌다..
하지만, 코드를 작성하다보면 위젯의 상태를 변경해야 할 때가 온다.


만약 이렇게 파란색 상자를 보라색으로 바꾸고 싶다면,,
이럴 때에 우리는 어떻게 해야하는가요..

아무리 Stateful위젯이라도, Stateless위젯이라도 불변의 법칙을 깰 수는 없다.
less는 싹 다 지우고 냅다 새로운 위젯을 다시 만들어내고, 생명주기를 통해 알 수 있다.

Stateful과 Stateless의 Life Cycle

두 위젯의 생명주기부터 보면 이해를 하기에 조금 더 수월하다.
여기서 말하는 생명주기는 해당 위젯의 탄생부터 죽음까지의 일대기를 보여주는 것이라고 생각하면 편하다.

Stateless의 생명주기


Stateless는 Constructor과정에서 생성되고, build에서 작업을 진행한다. 그리고 끝.
여기서 중요한 점은, Stateless의 라이프사이클안에서 모든 과정이 단 한 번만 이루어진다는 점이다. build가 한 번만 가능하며, 때문에 만약 Stateless위젯으로 코드를 짰는데, 변경이 필요하게 되는 경우에는 위에서 말한대로 위젯을 삭제하고 새로운 위젯을 만들어버리는 방법을 사용한다.

Stateful의 생명주기


dirty, clean, didchangeDependencies 등의 세부적인 주기가 더 있지만 일단은 이해를 돕기 위해서 조금 더 간략하게 만들었다.

먼저 Stateful에서 Constructor로 위젯을 생성하고, createState를 통해 State라는 위젯을 안에다가 새롭게 만들어준다. 이후에 State에서는 initState로 초기에 한 번 셋팅을 처리하고 build작업에 들어간다. 이후에 원한다면 dispose. 삭제되는 과정으로 생명주기가 진행된다.

Stateful위젯은 특이하게도 두개의 위젯을 가진다 Stateful과 State.

위젯을 변경하는 과정에서의 생명주기는 따로 있다.

1. 파라미터 값을 변경하는 경우


다른 위젯에서 받아온 파라미터의 값을 변경하여 위젯을 사용하는 경우, 위와 같은 모습으로 진행이 된다. Stateful에서 파라미터를 받아 Constructor을 실행하고, 변경된 파라미터 값들을 가지고 Stateful가 생성될 때 함께 생성했던 State위젯을 한 번 더 빌드해준다.(didUpdateWidget라는 함수가 실행됨으로써 빌드)

2. 상태를 변경하는 경우(setState)


setState를 활용하여 위젯 상태를 변경하는 경우의 라이프사이클은 아주 간단하다. 우선 선언된 setState함수가 실행되면서 상태의 값이 변경되고, 그 값들을 빌드한다.

+추가적으로, Stateful위젯에서 initState는 뭐든간에 딱 한 번만 실행된다는 특징이 있다. 반드시 유의하자.

코드로 알아보는 위젯 차이

Stateless위젯

                                class Less extends StatelessWidget {
                                  const Less({Key? key}) : super(key : key);
                                   
                                   
                                  Widget build(BuildContext context) {
                                    return  Container();
                                  }
                                }
                                
                            

파라미터를 받아와서 그대로 실행한다.

Stateful위젯


이상하게 생겼다.
위에서 말한대로 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로 변경해주는 기능 있음

Stateless와 Stateful위젯의 차이 요약

위의 생명주기를 토대로 둘의 차이점을 나열해보자면,

  • Stateless는 위젯이 한 개, Stateful은 위젯이 두개, 하나는 Stateful, 나머지 하나는 Stateful 안에 들어있는 Steate.
  • Stateless는 빌드를 한 번 밖에 할 수 없으므로, 상태를 바꾸고자 한다면 매번 삭제하고 새로운 위젯을 만들어야한다.
  • Stateful은 상태를 바꾸고자 할 경우에는 파라미터값을 바꾸느냐, 내부 값을 바꾸느냐에 따라 구조가 다르게 나뉘지만 두 가지 방법 모두 여러 번 빌드하는 방법을 활용하고 있으며, 때문에 위젯을 완전히 삭제하거나 생성하지 않아도 된다.

기본적으로 상태가 계속해서 변화한다면 Stateful을 써야하긴 하지만, 만약 그렇지 않다면 기왕이면 Stateless를 쓰는 것이 프로그램을 조금 더 가볍고 보기 좋게 만들 수 있는 방법이다.
따라서, 한 화면 안에서도 Stateful을 사용해야하는 부분과 그렇지 않은 부분을 잘 분류해서 코드를 작성하면 좋다.

profile
Logbook

0개의 댓글