오늘은 Flutter에서 StatelessWidget과 StatelfulWidget이 무엇인지에 대해 알아보도록 하겠습니다. 지난번 글을 통해 Flutter에서 State Management라는 개념을 통해 화면을 변화시킨다는 핵심 개념에 대해 알아보았는데, 이와 더불어 중요한 것이 StatelessWidget과 SatefulWidget의 차이점을 알고 적절하게 사용하는 것입니다.
2023.01.06 - [Flutter&Dart] - [Flutter] 상태(State)에 대해 알아보자, Flutter State
[Flutter] 상태(State)에 대해 알아보자, Flutter State
이번 글에선 Flutter에서 상태(State)란 무엇인지, 어떤 것을 상태라고 하며 어떤 방식으로 사용되는지에 대해 구체적인 예시를 통해 알아보도록 하겠습니다. 상태(State)의 정의 Flutter 공식 문서에서
do-it-bobby.tistory.com
추측
'Flutter의 모든것은 Widget이다'라는 말을 할 정도로 위젯은 Flutter의 핵심이 되는 개념입니다. 그리고 이런 위젯에는 대표적으로 Stateless와 Stateful이라는 위젯이 존재합니다. 먼저 이름만으로 두 위젯의 정체를 유추해 보겠습니다.
킹갓엠페러제너럴충무공마제스티하이퍼울트라 구글의 개발자들이 많은 시간을 들여 설계하고 만들어낸 프레임워크이기 때문에 이름 하나를 짓는데도 각고의 노력이 들어갔으리라 생각됩니다.
StatelessWidget - 음... 'less'가 붙었으니까 상태가 없는 위젯이란 뜻인가?
StatefulWidget - 흐음... 반대로 'ful'이니까 상태가 있는 위젯인가?
이름만으로 유추한 것이지만 실제 정체에 근접한 추측입니다.
StatelessWidget
A widget that does not require mutable state.
문서에선 StatelessWidget을 위와 같이 정의하고 있습니다.
파파고 선생님의 말처럼 StatelessWidget은 우리가 이름만 보고 유추했 듯, 상태를 가지지 않는 위젯입니다. 즉, 위젯 내부의 특정 상태 변화에 따라 화면을 다시 그릴 필요가 없는 상황에서 사용하는 위젯이라고 할 수 있습니다.
flutter create <project> 명령어를 사용하면 처음 만들어지는 예제 앱의 코드를 약간 변형하여 예를 들어 보겠습니다.
ChildWidget의 역할은 간단합니다.
기능 : 특정(number) 숫자를 화면에 그린다.
위의 기능에서 상태로 관리될 만한 내용은 없어 보입니다. 단순히 화면에 숫자만 그릴뿐이니까요! 따라서 ChildWidget은 StatelessWidget으로 구현할 수 있습니다. 물론 '버튼을 누르면 숫자가 증가하고, 변경된 숫자를 다시 그려야 하니까 상태를 가져야 하는 거 아니야?'라고 생각할 수 있지만, 그것은 부모 위젯의 관점입니다. ChildWidget만 놓고 봤을 땐, 해당 위젯은 단순히 생성자를 통해 넘어온 number라는 값을 화면에 그리는 역할만 수행합니다. 숫자 변화에 대한 것은 고려할 필요가 없는 것입니다.
StatefulWidget
A widget that has mutable state.
StatefulWidget은 Stateless 위젯과 반대로 변경할 수 있는 상태를 가지는 위젯입니다. 다시 말해서 상태를 통해 화면이 변경되어야 하는 경우 사용하는 위젯입니다. 지난번 글에서 정리한 State가 무엇인지 떠올리면 쉽게 이해할 수 있는 내용입니다.
다시 예시 코드를 보겠습니다.
ChildWidget의 부모가 되는 ParentWidget의 기능은 아래와 같습니다.
기능 : 숫자를 저장하고, 버튼을 누를 때마다 숫자를 1씩 증가시킨다. 증가된 숫자는 화면에 표시된다.
기능에 명시된 것처럼 ParentWidget은 내부적으로 특정 이벤트의 결과로 변경되어야 하는 부분(숫자)이 존재합니다. 따라서 StatefulWidget으로 구현되어야 합니다.
상태가 없는 위젯과 상태가 있는 위젯이라는 꽤나 단순한 정의를 실제 코드를 통해 알아보았습니다. 처음 Flutter를 접한다면 이 정도로만 두 위젯을 구분할 수 있어도 충분합니다. 하지만 이는 아주 겉핥기식의 내용이기 때문에 Flutter를 이해하기 위해선 좀 더 깊은 내용을 알아볼 필요가 있습니다.
다음 글에선 Widget의 immutable이란 무엇인지, 그리고 immutable 한 속성이 실제 Flutter의 트리를 통해 어떤 방식으로 사용되는지 알아보겠습니다.
'Flutter&Dart' 카테고리의 다른 글
| Flutter 버전관리, FVM을 이용한 SDK 버전 관리 (0) | 2023.01.29 |
|---|---|
| Flutter InheritedWidget이란, InheritedWidget 사용법 (0) | 2023.01.17 |
| Flutter Widget / ListView(리스트뷰) 사용방법 (0) | 2023.01.14 |
| [Flutter] 상태(State)에 대해 알아보자, Flutter State (0) | 2023.01.06 |
| [Flutter] 실무에서 유용한 플러터 패키지(Pub.dev) (1) | 2022.12.18 |
댓글