Widget (Stateless, Stateful)과 Widget Tree

1. Widget

플러터에서의 위젯이란, UI를 구성하는 가장 기본적인 단위이며, HTML에서의 Element와 같다고 보면 된다. HTML에서 Element는 모든 요소에게 적용되고 가장 기본이 되는 단위인 것처럼 플러터의 위젯도 똑같다고 볼 수 있다. 플러터에서의 위젯에는 Row, Column, Scaffold, Stack, Button, Color, Center, Padding..... 등이 있다.

 

1) Widget의 특징

• Flutter의 모든 Widget은 "변하지 않는 불변"의 특성을 가지고 있다.
• 하지만 앱이라면, 사용자와의 상호작용을 위해 필수적으로, 클릭 시 색상이 변경된다던지, 숫자가 올라가야 된다던지 위젯의 값을 변경해야 할 때가 있다.
• 플러터의 위젯은 변경이 필요하면 기존의 위젯을 삭제해 버리고, 완전히 새로운 위젯으로 대체한다.

2) Stateless Widget

• 가장 많이 쓰이는 위젯으로, 플러터 앱이 동작하는 중, 상태가 변하지 않는 Widget을 말한다. 
• 즉, 처음 설정한 대로 UI가 그려지고, 앱의 생명 주기 동안 이 위젯은 없어지지 않는다.
• Constructor로 생성이 되고, 생성이 되자마자 build() 함수를 호출해 UI를 구성한다.
  • 라이프 사이클 동안 단 한 번만 build() 함수를 실행한다.
  • 자체적으로 상태(state)를 가지지 않고, 부모 위젯으로부터 전달받은 값이 변경되면 rebuild 해서 아예 새로운 위젯으로 대체한다. 즉, 위젯의 변경이 일어나면 처음부터 Constructor와 build가 다시 실행된다.

3) Stateful Widget

• 플러터 앱이 동작하는 중 상태가 변하는 Widget을 말한다.
• Stateless와 달리 자체적으로 상태(state)를 가지고 있다.
• 상태를 관리하기 위해서는 build()를 여러 번 호출하는 형태가 돼야 하는데 기존의 Stateless 방식으로는 build() 가 절대적으로 한 번만 불리기 때문에, 상태 관리가 불가능하다.
  • 그래서 Stateful Widget 조차도 불변의 특성을 거스를 수 없다.
  • 하여 기존의 Stateful Widget과 + build를 여러 번 호출할 수 있는 State를 함께 사용한다. 즉 2개의 클래스를 활용한다.

 

Stateful Widget LifeCycle

1. Constructor 호출 후, createState()를 호출하고 상태(state)를 만든다.
2. 상태를 만들게 되면, initState()를 호출해 상태에 관한 초기화를 하고, didChangeDependencies()가 불리고 난 후 변경이 필요한 상태인 dirty 상태가 된다. (initState()는 절대적으로 한 번만 호출된다.)
3. build() 함수를 호출하고 화면에 UI가 그려지고, clean 상태로 변경된다.
4. Widget을 삭제할 경우에는 deactivate()가 불리고 dispose가 불려서 삭제가 된다. 
   1. Widget을 삭제하지 않고, 파라미터만 바뀌었을 경우에는 StatefulWidget은 삭제가 되고 다시 생기지만, Construcotr만 실행되게 되고 createState()는 호출되지 않는다.
   2. 기존의 State에 대해 바로 연결되게 된다.
   3. clean 상태였던 State에서 didUpdateWidget()이 호출되고, dirty, build, clean 과정을 거친다.

 

setState()를 실행했을 때

1. State 안에서 setState를 직접 호출할 수 있다.
2. State가 clean 상태에서, setState()를 실행하게 되고
3. dirty, build, clean 과정을 거치게 된다.

2. Widget Tree

위젯들의 부모, 자식 관계를 나타내는 것을 위젯 트리라고 부른다. HTML에서의 DOM과 비슷하다고 생각해도 된다.

 

플러터는 단순히 위젯 트리 하나만으로 구성되지 않는다.

1) Widget Tree

• immutable(불변)인 오브젝트로 구성되어 있다.
• 오브젝트의 생성 및 파기 비용이 매우 작도록 설계되어 있다.

2) Element Tree

• mutable(가변)인 오브젝트로 구성되어 있다.
• widget Tree의 상태를 관리하고, RenderObject Tree의 라이프 사이클을 관리한다.

3) RenderObject Tree

• 화면 렌더링과 그리기의 역할을 담당한다.
• mutable(가변)인 오브젝트로 구성된다.