Stateful Widget과 Stateless Widget에 대해 알려면 일단 먼저 State 라는 단어의 뜻을 먼저 알아야 한다.
State란?
: "상태"라는 뜻으로, UI에 변화가 생기도록 영향을 미치는 데이터를 뜻한다.
위젯의 상태를 저장하며, 위젯이 생성될 때 위젯의 속성을 유지하는 객체이다.
그렇다면 이제 Stateful과 Stateless의 뜻을 간단하게 이해할 수 있다.
Stateless Widget 이란?
: 상태가 없는 위젯이다.
이벤트 또는 사용자 상호 작용에 의해 작동하지 않아 위젯의 상태를 따로 저장할 필요가 없다.
Ex) Text, Icon, Button
특징
- 불변 : 한 번 생성되면 상태가 변하지 않는다.
- 간단한 UI : 주로 고정된 UI를 표시할 때 사용된다.
- 재렌더링 : 상태가 변하지 않기 때문에 재렌더링이 필요하지 않다.
-> 렌더링이 필요한 경우에만 다시 그려지기 때문에 성능이 향상될 수 있다.
기본 코드
StatelessWidget을 상속하고, build()함수를 @override 하고있다.
build()함수는 parameter로 context (context = 부모 Widget의 정보)를 받고 있고,
Widget 타입을 return하게 되어 있다.
생명주기
- 생성자 호출 : 위젯이 처음 생성될 때 생성자가 호출된다.
-> 상태가 변하지 않기 때문에 한 번 생성된 후 다시 빌드되지 않음
-> 단, 부모 위젯이 재빌드되어 자식 위젯도 재빌드되는 경우는 제외 - build : build 메서드가 호출되어 위젯의 UI를 구성한다.
- 위젯 소멸 : 위젯이 더 이상 필요하지 않을 때 소멸된다.
Stateful Widget
: 상태를 가지는 위젯이다.
사용자 상호작용, 애니메이션, 데이터 변경 등에 따라 동적으로 변하는 UI를 만들 때 사용된다.
Ex) TextField, Form, CheckBox
특징
- 가변 : 위젯의 상태가 변할 수 있다.
- 동적 UI : 사용자 상호작용이나 데이터 변경에 따라 UI가 변한다.
- 재렌더링 : 상태가 변할 때마다 위젯이 재렌더링된다.
- State 객체와 함께 사용된다. State 객체는 위젯의 상태를 관리하고 상태가 변경될 때마다 화면을 다시 그리는 로직을 수행한다.
기본 코드
StatefulWidget을 상속받아서 createState()함수를 @override하고 있다.
createState()함수는 Class를 생성하고, 이는 State를 상속 받아 build() 함수를 @override 한다.
Stateful 위젯은 createState() 메소드로 State를 생성한다.
생명주기
Stateful Widget과 State 객체 두 부분으로 나뉜다.
Stateful Widget
1. createState
: State 객체를 생성하는 메서드이다.
StatefulWidget이 생성될 때 한 번 호출된다.
Stateful Widget 객체를 생성하면 생성자가 호출되고 이 메서드가 호출된다.
State
1. InitState
: State 객체가 처음 생성될 때 호출된다. 초기 상태 설정을 한다.
위젯이 최초 생성되는 상황이면 이 메서드가 호출된다.
처음 한 번만 호출되는 함수이다.
여기서 데이터나 속성값을 초기화 할 수 있다.
Ex) 알림변경, 위젯의 데이터를 변경할 수 있는 다른 객체 핸들링
2. didChangeDependencies
: InitState 이후 또는 종속성 객체가 변경될 때 호출된다.
추가적으로 위젯이 의존하는 데이터의 객체가 호출될 때 호출 되기도 한다.
Ex) Inherited Widget, API 호출
3. build
: 위젯의 UI를 구성하는 메서드이다.
상태가 변경될 때마다 호출된다.
build()를 통해서 위젯이 그려진다.
State 클래스에서 반드시 오버라이딩 되어야 하는 메서드이다.
Ex) 버튼 클릭 할 때, 어떠한 액션을 취할 때 계속 실행됨
4. didUpdateWidget
: 부모 위젯이 StatefulWidget을 재빌드하고 새로운 위젯이 현재의 State 객체와 연결될 때 호출된다.
didUpdateWiget()이 호출된 후에는 항상 build()를 호출한다.
-> 만약 didUpdateWiget() 내에서 setState() 를 호출하면 build() 중복 호출이 된다.
기본적으로 위젯의 상태와 관련된 위젯을 재 구성해야 하는 경우 initState()을 대치한다.
5. setState
: 상태를 변경하고, UI를 재구성한다.
State 객체의 상태가 변경되었다는 것을 프레임워크에 알리는 용도이다.
-> State 객체의 상태가 변경될 때마다 setState() 함수를 통해서 알려야 한다.
-> 그래야만 프레임워크가 build() 함수가 호출할 준비를 한다.
6. deactivate
: State 객체가 위젯 트리에서 제거될 때 호출된다.
어떤 경우에는 프레임워크가 제거된 State 객체를 트리의 다른 부분에 다시 삽입하기도 한다.
-> 이 경우에는 State 객체가 트리의 새로운 위치에 적응할 수 있는 기회를 주기 위해 build()를 호출한다.
7. dispose
: State 객체가 완전히 제거될 때 호출된다.
리소스 해체를 한다.
더이상 빌드되지 않는다는 의미이다.
8. reassemble()
: hot reload를 실행하면 reassemble()이 호출된다.
reassemble()이 호출되면 build()도 호출이 된다.
Stateful Widget과 Stateless Widget의 차이
결국 상태가 동적으로 변하는 지의 여부이다.
UI에 변화가 생기도록 영향을 미치는 데이터가 있냐 없냐의 차이이다.
