플러터, flutter) 플러터 이해하기 - Widget, Element, Render Tree & context

플러터는 60fps를 목표로 합니다. 그래서 1초에 60번 화면을 다시 그립니다.

이게 무리가 가진 않을까요?

 

아닙니다. 1초에 60번 계산하고, 화면을 그리면 무리가 갈 순 있는데,

플러터는 변경사항이 없다면 이전 계산값을 그대로 사용합니다. 계산량을 확 줄일 수 있죠.

 

setstate이 실행되면 build가 자동으로 실행되고,

build가 실행되면 해당하는 코드들이 실행이 되면서 아시다시피 위젯들은 '객체'이기도 하기에

기존 객체들은 사라지고, 새로운 객체들로 대체 된다.

 

객체가 새롭게 생긴다면 화면에 다시 그려야 하는게 아닐까?

아니다.

 

플러터는 3개의 Tree로 구성되어 있다.

 

Widget Tree - Element Tree - Render Tree 

 

1) Widget Tree

 - 위젯트리는 우리가 코드를 통해 구현한 트리를 의미한다.

 - 우리는 코드를 통해 widget tree를 건들 수 있고, build가 실행되면 widget tree의 객체들이 사라지고,

   새로운 widget tree가 다시 생겨난다.

 

2) Element tree 

 - 위젯트리는 빠르게 생겨났다 사라지고 다시 빌드되지만 Element Tree는 widget Tree의 객체들이 처음생겨날 때 한 번 생겨난다. 앱이 start되거나 할 때 말이다.

 - 이때 element Tree는 widget tree의 위젯들과 1:1로 연결되며, widget들의 정보를 담고 있는다.

 - element tree는 플러터가 내부적으로 만든다.

 - widget tree의 객체들이 사라지고 다시 빌드되면 그때 element tree는 widget tree의 새로 생겨난 위젯들과 1:1 매칭을 다시 연결하고(reference를 다시 연결), 그 뒤에 기존의 위젯과는 변경된 내용들이 없는지 체크한다. 

 - 변경된 사항들은 render tree에 전달되어서 해당 부분들만 다시 render하라고 말해준다.

 

<Context>

> 각 위젯은 context를 갖고 있습니다. context는 위젯에 대한 meta정보나, 위젯트리에서의 위치를 나타내주는데요. Element Tree는 이 위젯에 대한 context로 구성되어 있습니다.

> context는 위젯의 meta정보도 있지만, 위젯트리에서의 위치정보도 있기 때문에, 이것을 통해서 위젯들간의 위치를 정확히 파악할 수 있습니다. inherent widget에서는 context의 위치정보를 사용하여 다른 위젯들과 곧장 연결합니다.

> MediaQuery나 Theme 같은 것들이 대표적인 inherent widget입니다. 얘네들을 사용할 때 우리는 of(context)를 통해 곧장 data에 접근합니다. 기존의 생성자 parameter를 통해 쭉 전달받은 것이 아니지요. 이것은 context를 통해 위젯트리 상단에 위치하는 MediaQuery나 Theme의 위치를 파악하여 직접 연결을 해서 정보를 가져오는 것입니다.

 

Context가 하는 일이 무엇인지 알아두어야 합니다.

 

3) Render Tree

 - 실제로 그려진 화면에 대한 Tree이다.

 - Element tree랑 연결되어 있으며 widget tree랑은 연결되어 있지 않다.

 - 이 부분 역시 플러터가 알아서 관리한다.

 

> 이런 원리 때문에 build를 다시 해도, 객체만 만들어질 뿐 화면을 다시 구성하는 데에는 큰 영향을 주지 않는다.

> 이런 원리 때문에 플러터가 빠르고 효율적이기도 하다.

 

 

cf) Stateful Widget

- statelee widget은 element tree에서 1:1로 매칭되지만, stateful은 element Tree에 2개가 생성된다. 그냥 위젯에 관한 것과 state 객체가 생성되며, state은 element tree랑만 연결된다. set state을 실행하면 state에서 바뀐 부분을 토대로 위젯을 다시 만들게 된다. build를 하면 기존의 위젯은 사라지고 다시 만들어지는데, 그렇게 되면 정보를 저장할 수가 없다. 그래서 state에 정보를 저장하고 다시 build되면 state의 값을 통해 다시 만들어진다. 

 

 

참고; 최적화 관련

https://papabee.tistory.com/78

 

참고; 플러터 내부에 관한 사항 doc

https://flutter.dev/docs/resources/inside-flutter