[flutter 개념] 위젯이란 (stateless, statefull)

위젯(Widget)

모든 UI를 구성하는 기본 단위이며 앱 화면에 그려지는 모든 요소가 위젯으로 구성되어 있습니다.

앱 화면에 무엇인가 표시하는 경우에 모든 요소를 widget으로 처리 합니다.

앱을 구성하는 Column, Row, Center, Icon, Text, Button, Image 등의 하나하나의 요소가 모두 위젯이라고 생각하시면 됩니다.

위젯의 종류에는 상태 변경이 불가능한 Stateless Widget과 상태 관리에 따라서 상태 변경이 가능한  Statefull widget이 있습니다.

---

Stateless Widget

stateless 위젯은 상태의 변화가 필요하지 않은 위젯이고, 화면을 렌더링 한 후 데이터의 변경이 없습니다.
Text 또는 Image 위젯과 같이 어떠한 데이터를 저장하거나 변화가 필요한 상태값을 갖지 않는 위젯들이 여기에 속합니다.
쉽게 말해서 화면에 보여지는 역할만 하는 위젯 입니다.

 

<생명주기(Life-Cycle)>

1. Constructor로 생성이되고 생성이 되자마자 build()함수가 실행된다.

2. 이전 위젯의 변경이 필요하면 새로운 위젯을 만든다.

3. build()함수는 단 한번만 실행이 되며, build()함수가 재실행이 되면 기존에 있던 stateless 위젯이 제거가 되고 완전히 새로운 stateless 위젯이 새롭게 생성이 됩니다.

---

Stateful Widget

stateful widget은 변경 가능한 상태를 가진 위젯이며 지속적으로 어떠한 데이터나 상태값이 동적으로 변화하는 위젯 입니다.
stateful widget 은 stateful widget, state의 두개의 클래스로 구성됩니다.

 

<생명주기(Life-Cycle)>

 

1. statefulWidget의 Construnctor가 불린후 createState가 호출되며 state를 생성한다.

2. state의 initState를 호출한다. initState는 state를 초기화 한다.

3. didChangeDependencies가 호출되며 dirty상태로 state가 지정이 된다.

4. build함수가 호출되며 위젯을 화면에 그려준다.

5. build 실행후 clean 상태가 되며 위젯이 삭제된다고 가정하였을때 deactivate가 호출되고 이후 dispose가 호출된다.

 

<stateful widget이 생성된 후 파라미터가 바뀌었을 때>

1. 파라미터가 변경이되면 기존의 위젯이 삭제가되고 새로운 위젯이 생겨서 Constructor가 실행된다.

2. 이 경우 createState를 실행하지 않고 기존의 State를 찾아 원래있던 state를 재활용한다.

3. clean상태에서 didUpdateWidget이 실행된다.

4. dirty상태가  되며 변경된 상태값들을 기반으로 다시 build를 실행한다.

5. 이후 동일함

 

<setState를 실행했을 때의 생명주기>

1. setState는 실행하면 dirty상태가 되고 다시 build를 실행한다. (setState에서 값을 변경할 수 있다.)