플러터 3가지 트리를 위주로 렌더링 되는 방법에 대해 설명

플러터 3가지 트리를 위주로 렌더링 되는 방법에 대해 설명

화면을 그리는 단계 1. build

widgetTree

• build()의 결과로 리턴된 위젯들이 계층구조를 이룸
• 내가 작성한 위젯 말고 내부적으로 필요한 위젯들이 더 추가될 수 있음

elementTree

• 위젯트리의 각 위젯은 (예를들어 color, alignment, padding을 가지는 container를 만들고싶다는 내용을 담은)설명서다.
• 이 설명서를 바탕으로 실제 인스턴스(==element)를 만드는 만든다.
• 위젯의 라이프사이클은 element가 관리한다. mount, update, performbuild 등의 함수는 element의 메소드이다.
• 위젯트리와 element트리는 1:1 대응이 된다.
• element의 종류는 두가지 이다.
  • component element : 다른 element들의 host이다. 실제 화면을 그릴 때 참고되지 않는다.
  • renderObject element : layout, paint단계에 직접 참고된다.

화면을 그리는 단계 2. layout

renderTree

• elementTree를 참고해 최종적으로 위젯의 위치와 크기를 결정해서 render tree에 저장한다.
• render tree는 실제 화면을 그리는데 사용한다.
• 위젯의 크기와 위치를 결정하는 방법
  • 부모→자식으로는 제약(최대,최소 높이/넓이)가 전달됨
  • 자식은 전달받은 제약 내에서 본인의 크기를 결정함 (자식이 여러개일 경우 inflexible한 자식의 크기부터 결정이 된다.)
  • 자식→부모로 자식의 크기가 전달됨
  • 부모는 전달받은 자식의 크기를 가지고 자식의 위치를 결정함
  • 부모는 자신의 크기를 결정하고 본인의 부모(부모의 부모)로 값을 전달한다
  • 이 과정이 … root 노드까지 반복된다

3가지 트리가 효율적인 렌더링에 도움이 되는 이유

• 플러터는 60프레임을 1초에 그릴 수 있으므로👆위의 layout 과정이 1초에 60번 일어난다. 이것을 효율적으로 하기 위해 지금까지 설명한 3가지 tree 구조가 필요한 것이다.

  • 프레임을 새로 그릴 때 위젯이 변겅되었다고 무조건 render tree의 요소를 아예 새로 갈아끼우는 것이 아니라, element tree가 render tree의 요소를 아예 새로 갈아끼울지 or 기존 요소를 유지하면서 내용만 변경할지 판단한다.

  • 위젯의 key나 runtimeType이 기존 위젯과 같다면 element tree가 render tree의 기존 요소를 유지하면서 내용만 변경하게끔 한다.(canUpdate)

  • 이런 과정을 통해 3개의 트리구조가 화면을 효율적으로 그릴 수 있는 것이다.

    화면을 그리는 단계 3. paint

  • layer tree를 만들어 레이어를 구성한다.

  • 이후 단계는 GPU에서 composition(각 레이어를 하나의 이미지로 합치는 과정)과 레지스터화(이미지를 화면에 표시할 수 있는 픽셀로 변경하는 과정)을 거쳐 화면에 그려지게 된다.

참고