[Flutter] Stateless Widget 과 Stateful Widget 차이는 뭘까?

둘의 차이를 알려면 먼저 State(상태)가 무엇인지 알아야한다. 

State(상태)

상태(state)란 UI에 변화가 생기도록 영향을 미치는 데이터를 말한다.

• 사용자가 입력한 텍스트
• 클릭된 버튼의 개수
• 체크박스의 선택 여부
• 서버에서 가져온 데이터 등

---

다음으로는 Stateless Widget과 Stateful Widget 각각의 정의와 특징, 생명주기에 대해 알아보자

Stateless Widget

StatelessWidget은 상태가 없는 위젯이다.

즉, 위젯이 생성된 후에는 변하지 않는다. 상태가 변하지 않기 때문에 사용자 인터페이스(UI)도 변경되지 않는다.

단순히 주어진 입력 데이터를 화면에 표시하기만 한다.

특징:

• 불변: 한 번 생성되면 상태가 변하지 않는다.
• 간단한 UI: 주로 고정된 UI를 표시할 때 사용된다.
• 재렌더링: 상태가 변하지 않기 때문에 재렌더링이 필요하지 않다.

StatelessWidget 생명주기

1. 생성자 호출: 위젯이 처음 생성될 때 생성자가 호출된다.
2. build: build 메서드가 호출되어 위젯의 UI를 구성한다.

생성자 호출 → build 상태가 변하지 않기 때문에 한 번 생성된 후에는 다시 빌드되지 않음

 

StatelessWidget은 상태가 변하지 않기 때문에 위젯이 한 번 빌드된 후에는 다시 빌드되지 않는다. 단, 부모 위젯이 재빌드되어 자식 위젯도 재빌드되는 경우는 제외이다.

---

Stateful Widget

StatefulWidget은 상태를 가지는 위젯이다.

상태가 변할 수 있기 때문에 UI도 변할 수 있다.

이 위젯은 사용자 상호작용, 애니메이션, 데이터 변경 등에 따라 동적으로 변하는 UI를 만들 때 사용된다.

특징:

• 변할 수 있는 상태: 위젯의 상태가 변할 수 있다.
• 동적 UI: 사용자 상호작용이나 데이터 변경에 따라 UI가 변한다.
• 재렌더링: 상태가 변할 때마다 위젯이 재렌더링된다.

StatefulWidget의 생명주기

StatefulWidget의 생명주기는 StatelessWidget의 생명주기보다 더 복잡하며, 

StatefulWidget과 State 객체 두 부분으로 나눠진다.

 

StatefulWidget 생명주기

1. createState: State 객체를 생성하는 메서드이다. StatefulWidget이 생성될 때 한 번 호출된다.

State 객체의 생명주기

1. initState: State 객체가 처음 생성될 때 호출됩니다. 초기 상태 설정을 한다.
2. didChangeDependencies: initState 이후 또는 종속성 객체가 변경될 때 호출된다.
3. build: 위젯의 UI를 구성하는 메서드이다. 상태가 변경될 때마다 호출된다.
4. didUpdateWidget: 부모 위젯이 StatefulWidget을 재빌드하고 새로운 위젯이 현재의 State 객체와 연결될 때 호출된다.
5. setState: 상태를 변경하고, UI를 재구성합니다. 이 메서드는 상태가 변경될 때마다 호출된다.
6. deactivate: State 객체가 위젯 트리에서 제거될 때 호출된다.
7. dispose: State 객체가 완전히 제거될 때 호출된다. 리소스 해제를 한다.

createState 호출 → initState → build → (상태 변경) setState → build didChangeDependencies, didUpdateWidget, deactivate, dispose 등 추가적인 생명주기 메서드 존재

---

Stateless Widget과 Stateful Widget의 차이

결론적으로 Stateless Widget과 Stateful Widget의 차이는 상태가 동적으로 변하는 지의 여부이다. 쉽게 말하면 UI에 변화가 생기도록 영향을 미치는 데이터가 있냐 없냐의 차이이다.

 

---

 

상태관리에 대해 알고 싶다면 다음 글로 !