flutter )) tree 삼종세트

 

Widget Tree

화면을 만들기위해 작성한 위젯을 트리 형식만든다. widget tree는 Element Tree와 1:1로 연결되어 있다.

위젯은 immutable(변하지 않으려는)한 특성을 가지고 있다.

 

Element Tree

변하지 않으려는 위젯 트리 대신에 상태를 관리하고 RenderObject Tree의 라이프 사이클을 관리하는 트리이다.

아래의 사진처럼 위젯 트리와 엘리먼트 트리는 1:1로 연결되었다. 또한 Stateful 위젯은 Element Tree 에 상태가 추가된다. 이때, 재설정이 필요하면 해당 부분만 re-build되기 때문에 리소스 낭비가 아니다.

반대로 stateless 위젯은 상태가 없다.

 

 

RenderObject Tree

RenderObject tree는 Element Tree에서 라이프 사이클을 관리하기 때문에 서로 연결되어 있다.

 

 

Key

변화하는 상태를 대비해 현 상태를 보존하는 역할을 한다.

쇼핑몰을 생각해보자. 원하는 옷을 찾기 위해 아래로 스크롤 했다가 맘에 드는 옷을 터치해서 보고 뒤로가기 했을 때,

맨 위 첫 리스트가 보인다면, 그것이 반복된다면? 꽤 불편할 것이다. 이것을 위해 Key가 있다.