widget
: Flutter에서 화면에 표시된 모든 요소가 위젯이라 한다. 눈에 보이지 않지만 화면을 구성하는 레이아웃(Layout)도 위젯이라고 한다.
위젯은 크게 두 가지로 분류할 수 있다.
- Stateful Widget
- Stateless Widget
Stateful, Stateless Widget
1) Stateless Widget
: 어떠한 상태도 가지고 있지 않은 정적인 위젯이다. 어떠한 상태값도 가지고 있지 않기 때문에 Stateless Widget은 화면에서 어떠한 움직임이나 변화가 없다.
- 예: 텍스트, 이미지 등.
Stateless Widget은 화면에는 표시되지만, 사용자와 어떠한 인터렉션도 하지않는다. Stateless Widget은 StatelessWidget을 상속하여 생성한다.
2) Stateful Widget
Flutter에서 Stateful Widget은 어떤 상태값을 가지고 있으며, 해당 상태값에 의해 화면에 움직임이나 변화를 표현할 때 사용한다.
- 예: 텍스트 필드, 버튼, 서버에서 전달받은 값을 화면에 표시하는 위젯 등
Stateful Widget은 사용자의 인터렉션에 의해 모양이나 형태를 변경할 때 사용한다. Stateful Widget은 StatefulWidget을 상속받아 생성한다.
Widget Tree, Element Tree, RenderObject Tree
statelessWidget과 반대로 StatefulWidget은 상태 변경이 가능하다. createState()함수를 통해서 state객체를 만든다. 이 객체가 변경 가능한 특징을 가지고 있어 상태 변경에 대한 처리가 가능하다.
state
- 위젯이 빌드 완료된 후 읽을 수 있다. 따라서 build()함수 호출 전에 state설정이 되어야 한다.
- 위젯이 유효한 동안에 state는 변경가능하다.
state는 생성되면 buildContext에 연결된다.
BuildContext
각 위젯은 context를 갖고 있다. context는 위젯에 대한 meta정보, 위젯트리에서의 위치를 나타낸다. Element Tree는 이 위젯에 대한 context로 구성되어 있습니다.
여기서 위젯은 3개의 트리 구조로 구성되어 변경이 처리가 된다.
1) Widget Tree
- 위젯트리는 우리가 코드를 통해 구현한 트리를 의미한다.
- 우리는 코드를 통해 widget tree를 생성 및 제거할 수 있다. build가 되면 widget tree의 객체들이 사라지고, 새로운 widget tree가 다시 생겨난다.
- 즉, 위의 그림처럼 container가 없어지면 widget tree가 사라지고, 새로운 container가 생성되면 widget tree가 생성된다.
2) Element Tree
- Element Tree는 widget Tree의 객체들이 처음생겨날 때 한 번만 생성된다. 이 때 element Tree는 widget tree의 위젯들과 1:1로 연결되며, widget들의 정보를 담고 있다.
- element tree는 플러터가 내부적으로 만든다.
- widget tree의 객체들이 사라지고 다시 빌드되면 element tree는 widget tree의 새로 생겨난 위젯들과 1:1 매칭을 다시 연결한다. 그 리고 기존의 위젯과는 변경된 내용들이 없는지 체크한다.
- 변경된 사항들은 render tree에 전달되어서 해당 부분들만 다시 rerender하라고 말해준다.
3) RenderObject Tree
- 실제로 그려진 화면에 대한 Tree이다.
- Element tree랑 연결되어 있으며 widget tree랑은 연결되어 있지 않다.
- rebuild를 해도, 객체만 만들어질 뿐 화면을 다시 구성하는 데에는 큰 영향을 주지 않는다.
- 이런 원리 때문에 플러터가 빠르고 효율적이기도 하다.
정리
- stateless widget은 element tree에서 1:1로 매칭되지만, stateful은 element Tree에 2개가 생성된다. 위젯에 관한 것과 state 객체가 생성되며, state은 element tree랑만 연결된다.
- SetState을 실행되면 state에서 바뀐 부분을 토대로 위젯을 다시 만들게 된다. build를 하면 기존의 위젯은 사라지고 다시 만들어지는데, 그렇게 되면 정보를 저장할 수가 없다. 그래서 state에 정보를 저장하고 rebuild되면 state의 값을 통해 다시 만들어진다.
- state생성 → 트리의 특정위치를 참조하는 BuildContext 존재 → 해당 BuildContext에 연결 → 연결된 BuildContext에 위젯 배치(인스턴스화) → Element 생성
- widget tree : element의 구성을 기술하고 처리한다.
- element tree : 트리의 특정 위치에서 위젯을 인스턴스화한다.
- render tree : 크기, 레이아웃 등을 다루고 랜더링을 처리한다.
