코드몽키 찬스님의 모바일, 웹

렌더링 트리, 요소 트리 및 위젯 트리는 Flutter에서 UI를 만들고 렌더링하는 프로세스를 설명하는 관련 개념입니다.

1. 위젯 트리:
   위젯 트리는 사용자 인터페이스의 레이아웃과 모양을 나타내는 트리 구조입니다.
   위젯 트리의 각 노드는 재사용 가능한 UI 조각인 위젯을 나타냅니다.
   위젯 트리의 루트 노드는 애플리케이션의 루트 위젯을 나타냅니다.
   위젯 트리는 UI의 구조와 각 위젯의 속성을 정의하지만 최종 렌더링된 레이아웃이나 모양에 대한 정보는 포함하지 않습니다.
   
   
2. 요소 트리:
   요소 트리는 사용자 인터페이스의 레이아웃을 나타내는 트리 구조입니다.
   요소 트리의 각 노드는 위젯의 구체적인 인스턴스인 요소를 나타냅니다.
   요소 트리는 위젯 트리를 확장하여 생성됩니다.
   즉, 위젯 트리의 각 위젯이 UI에서 해당 위젯의 인스턴스를 나타내는 요소로 변환됩니다.
   요소 트리에는 각 위젯의 레이아웃 및 모양에 대한 정보가 포함되어 있으며 최종 렌더링된 레이아웃을 계산하는 데 사용됩니다.
   
   
3. 렌더 트리:
   렌더 트리는 사용자 인터페이스의 최종 렌더링된 레이아웃을 나타내는 트리 구조입니다.
   렌더링 트리의 각 노드는 화면에 칠할 수 있는 시각적 요소인 렌더링 개체를 나타냅니다.
   렌더링 트리는 요소 트리에서 생성됩니다.
   즉, 요소 ​​트리의 각 요소는 해당 요소의 최종 모양을 나타내는 렌더링 개체로 변환됩니다.
   렌더링 트리는 Flutter에서 사용자 인터페이스를 화면에 그리는 데 사용됩니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text(
          'Hello, World!',
          style: TextStyle(
            fontSize: 32.0,
            color: Colors.white
          ),
        ),
      ),
    );
  }
}