[Flutter] StatefulWidget vs. StatelessWidget

21. 11. 30.
- Could -

1. StatefulWidget vs. StatelessWidget
2. StatelessWidget
3. StatefulWidget

1. Stateful vs. Stateless

플러터의 위젯은 두가지로 구분할 수 있다. State가 있는 녀석과 없는 녀석. 있으면 StatefulWidget이고, 없으면 StatelessWidget이라고 한다. 이 클래스를 직접쓰는 경우는 없고 보통 아래와 같이 extends를 통해 상속을 해서 사용한다.

class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Text( 'Hello, World!', style: Theme.of(context).textTheme.headline4, ); } }

지금 안에 세부적인 코드는 중요하지 않다. 맨 위에 위젯 클래스를 선언하고 StatelessWidget을 상속받는 부분만 확인하면 된다.

그러면 이 둘은 어떤 차이가 있을까? 결론부터 정리하고 가자.
StatelessWidget은 고정된 형태로 한번 그려지고 나면 변화가 없는 위젯, StatefulWidget은 내부에 오는 데이터가 바뀔때마다 다시 그려질 수 있는 위젯이다. 직관적으로, 구현된 앱에서 모양의 변동이 없는 부분은 StatelessWidget, 모양이 변동하는 부분을 StatefulWidget이다.

State

https://youtu.be/QlwiL_yLh6E

그렇다면 State가 뭘까? 위 영상에서 아주 자세히 설명해준다. 엄청 직관적으로 설명하자면 위젯 안에 들어가는 데이터를 State라고 한다. 조금 더 명확히 얘기하면 'UI에 영향을 미치는 데이터'를 State라고 한다.

2. StatelessWidget

StatelessWidget은 말 그대로, State가 없다는 말이다. UI에 영향을 미치는 데이터가 없으면? 데이터의 변동에 따라 모양이 변하지 않는다는 말이고, 그 말은 즉 모양이 고정된 Widget이 된다. 한번 그려지고 나면 데이터가 어떻게 변하던지, 이 위젯에는 아무런 영향이 없다.

3. StatefulWidget

StatefulWidget은 State가 있다. UI에 영향을 미치는 데이터가 있으니, 그 데이터가 변함에 따라 UI가 변하게 된다. 물론 자동으로 휙휙 바뀌는 것은 아니다. 위 영상에 나온것 처럼 setState() 라는 함수를 사용해 State의 변화를 알려줘야한다. 이때 setState 함수가 실행되면 바뀐 데이터를 체크해 해당 데이터로 위젯을 다시 그린다.
결과적으로 State가 변하면 UI가 변하는 위젯. 그게 바로 StatefulWidget이다.

StatefulWidget의 Lifecycle

StatefulWidget은 StatelessWidget과 다르게 Lifecyle(생명주기)에 대해 알아야한다. StatelessWidget의 경우 그려지면 끝이기 때문에 Lifecycle이라는 게 없다. 하지만 StatefulWidget은 State의 변동에 따라 위젯의 UI가 변해야하므로, 처음 만들어지고 데이터가 변하고 위젯이 사라질때 등의 순차적인 단계가 있다. 세부적인 내용은 아래의 링크를 통해 확인해주기 바란다.

https://flutterbyexample.com/lesson/stateful-widget-lifecycle

StatefulWidget lifecycle

라이프사이클 전체의 순서를 외우지는 않아도 좋다. 그냥 이런게 있구나 알아두고, 나중에 이 라이프사이클에 따라 코드를 수정해야할 필요가 있을때 알아보고 사용하면 된다.

4. 이 둘의 구분의 의미

처음 이 두 위젯의 개념에 대해 익히고 나면, 이 둘을 엄격히 구분해서 써야할 것만 같은 기분이 든다. 사실 그렇다. 구분해서 쓰라고 만들어 놓은 개념이다. StatefulWidget의 경우, State에 따라 UI를 새로 그려야하므로 StatelessWidget보다 리소스를 많이 잡아먹게 되는 것이 사실이다. (요즘 같이 컴퓨터 성능이 좋아지면 고작 그 리소스따위.. 라는 생각이 들기도 한다.)
처음 공부할때는 이 둘의 차이를 명확히 알고, 꼭 써야할 곳에만 StatefulWidget을 쓰는 습관을 들이자. 물론 이걸 구분하고 따로 관리하는게 상당히 불편한 작업이 될 것이다. 심지어 추후 State를 보다 편히 관리하고자 나온 bloc, provider, getx 등의 패키지들을 학습하다보면, StatelessWidget과 StatefulWidget의 구분이 무의미하게 느껴진다. 그냥 전부 StatelessWidget을 쓰면 되는거였자나! 라며 짜증이 날지도 모른다.
하지만 난 한번도 StatelessWidget과 StatefulWidget을 괜히 공부했다고 생각하는 사람을 본적이 없다. 나중에 어떤 상태관리 패키지를 사용할지는 모르겠지만, 플러터를 다룰꺼라면 알아야하는 내용이니 너무 억울해하지 않았으면 좋겠다.