[Flutter] StatefulWidget 알아보기

상태 변화를 감지하는 기준이 되는 변수를 사용하여 상태 변화에 따라 어떠한 액션이나 형태를 바꿀 수 있는 위젯이다.

상태 변화는 State 내에서 setState를 통해 변경하고 이를 자동으로 감지하여 다시 그려준다.

공식 문서를 (번역하는 과정 중에 있다.) 읽어보는 것이 가장 빠르다.

 

원문 번역본 (w. papago)

https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html

StatefulWidget class - widgets library - Dart API

A widget that has mutable state.

"변환 가능한 위젯이다."

 

State is information that (1) can be read synchronously when the widget is built and (2) might change during the lifetime of the widget. It is the responsibility of the widget implementer to ensure that the State is promptly notified when such state changes, using State.setState.

"상태"는 위젯이 작성될 때

첫째, 동기적(synchronously)으로 읽을 수 있으며

둘째, 위젯이 살아있는 동안(during the lifetime) 변경될 수 있는 정보입니다.

State.setState 를 사용하여 이러한 상태가 변경될 때 해당 상태가 즉시 적용되도록 하는 것은 위젯 구현자(implementer)의 책임입니다.

 

A stateful widget is a widget that describes part of the user interface by building a constellation of other widgets that describe the user interface more concretely. The building process continues recursively until the description of the user interface is fully concrete (e.g., consists entirely of RenderObjectWidgets, which describe concrete RenderObjects).

StatefulWidget은 사용자 인터페이스를 보다 구체적으로 설명하는 다른 위젯의 묶음을 작성하여 사용자 인터페이스의 일부를 설명하는 위젯입니다. 빌드 프로세스는 사용자 인터페이스의 설명이 완전히 구체화될 때까지 반복적으로 계속됩니다(예: 구체적인 RenderObjects를 설명하는 RenderObjectWidgets로 전체적으로 구성됨).

 

Stateful widgets are useful when the part of the user interface you are describing can change dynamically, e.g. due to having an internal clock-driven state, or depending on some system state. For compositions that depend only on the configuration information in the object itself and the BuildContext in which the widget is inflated, consider using StatelessWidget.

StatefulWidget은 내부 클럭 기반 상태 또는 일부 시스템 상태에 따라 설명하는 사용자 인터페이스 부분이 동적으로 변경될 수 있는 경우 유용합니다. 개체 자체의 구성 정보와 위젯이 객체화된(inflated) BuildContext에만 의존하는 구성의 경우 StatelessWidget 사용을 고려하십시오.

 

 

StatefulWidget instances themselves are immutable and store their mutable state either in separate State objects that are created by the createState method, or in objects to which that State subscribes, for example Stream or ChangeNotifier objects, to which references are stored in final fields on the StatefulWidget itself.

StatefulWidget 인스턴스 자체는 변경할 수 없으며 변경 가능한 상태를 createState 메서드에 의해 생성된 별도의 State 개체 또는 StatefulWidget 자체의 최종 필드에 참조가 저장되는 Stream 또는 ChangeNotifier 개체와 같은 해당 State가 등록된 개체에 저장(subscribes)됩니다.

 

The framework calls createState whenever it inflates a StatefulWidget, which means that multiple State objects might be associated with the same StatefulWidget if that widget has been inserted into the tree in multiple places. Similarly, if a StatefulWidget is removed from the tree and later inserted in to the tree again, the framework will call createState again to create a fresh State object, simplifying the lifecycle of State objects.

이 프레임워크는 StatefulWidget을 객체화(inflates)할 때마다 createState를 호출합니다. 즉, 위젯이 트리에 여러 위치에 삽입된 경우 여러 State 개체가 동일한 상태 저장 위젯과 연결될 수 있습니다. 마찬가지로 StatefulWidget이 트리에서 제거되고 나중에 트리에 다시 삽입되면 프레임워크는 createState를 다시 호출하여 새로운 State 개체를 생성하여 State 개체의 수명을 단순화합니다.

 

A StatefulWidget keeps the same State object when moving from one location in the tree to another if its creator used a GlobalKey for its key. Because a widget with a GlobalKey can be used in at most one location in the tree, a widget that uses a GlobalKey has at most one associated element. The framework takes advantage of this property when moving a widget with a global key from one location in the tree to another by grafting the (unique) subtree associated with that widget from the old location to the new location (instead of recreating the subtree at the new location). The State objects associated with StatefulWidget are grafted along with the rest of the subtree, which means the State object is reused (instead of being recreated) in the new location. However, in order to be eligible for grafting, the widget must be inserted into the new location in the same animation frame in which it was removed from the old location.

StatefulWidget은 작성자가 key에 GlobalKey를 사용한 경우 트리의 한 위치에서 다른 위치로 이동할 때 동일한 State 개체를 유지합니다. GlobalKey가 있는 위젯은 트리의 최대 한 위치에서 사용할 수 있으므로 GlobalKey를 사용하는 위젯에는 최대 한 개의 관련 요소가 있습니다. 프레임워크는 GlobalKey가 있는 위젯을 트리의 한 위치에서 다른 위치로 이동할 때 이전 위치에서 해당 위젯과 관련된 (고유한) 하위 트리를 이식(grafting)하여 이 속성을 활용합니다 (새 위치로 하위 트리를 다시 만드는 대신). StatefulWidget과 연결된 State 개체는 하위 트리의 나머지 부분과 함께 이식(grafted)됩니다. 즉, State 개체가 새 위치에서 다시 생성되는 대신 다시 사용됩니다. 그러나 접붙이기에 적합하려면 위젯을 이전 위치에서 제거한 것과 동일한 애니메이션 프레임의 새 위치에 삽입해야 합니다.