[ 앱 개발자 도전기 : 크로스플랫폼_Flutter & Dart ]

위젯(Widget) & 엘리먼트(element) and 렌더 오브젝트(RenderObject)

∇ Flutter의 위젯(Widget) & 엘리먼트(Element) & 렌더 오브젝트 ( RenderObject)

목  차


1. Widget
2. Element
3. RenderObject

Ⅰ. Widget.

◎ Widget은 Flutter에서 UI를 구축하기 위한 기본적인 구성 요소입니다.
.
.

◎ Widget은 화면에 무엇을 그릴지에 대한 정보를 가지고 있으며,
재사용 가능하고 조합 가능한 조각들로 구성됩니다.

.
.

◎ Widget은 불변(immutable)하며, 한 번 정의된 후에는 변경되지 않습니다.

.
.

◎ Widget은 특정한 구조, 레이아웃, 스타일, 상태 및 상호작용을 정의 가능합니다.
.
.

◎ Widget은 화면에 렌더링 될 때 Element로 변환됩니다.

Ⅱ. Element

◎ Element는 Widget의 인스턴스를 나타내는 실제 요소입니다.
.
.

◎ Element는 Widget의 구체적인 인스턴스에 대한 정보를 가지고 있으며,

화면에 표시되는 데 필요한 작업을 수행합니다.
.
.

◎ Element는 상태를 가질 수 있으며, 상태가 변경될 때마다 화면을 업데이트할 수 있습니다.
.
.

◎ Element는 Widget 트리를 구성하고 관리하며,
필요에 따라 Widget의 생성 수정 삭제 등을 처리합니다.

.
.

◎ Element는 화면에 표시되는 데 필요한 최소한의 작업만 수행하며,

화면을 업데이트할 때 효율적인 방식으로 처리됩니다.

   == >> 위젯과 위젯의 렌더 객체를 관리합니다.

      - 트리의 모든 위젯 인스턴스에는 해당 요소가 포함되어있습니다.
      
      

Ⅲ. RenderObject

◎ RenderObject는 Flutter의 렌더링 엔진에서 UI 요소를 표현하고 그리기 위한 저수준의 추상화입니다.
.
.

◎ RenderObject는 UI 요소의 크기 위치 그리기 * 레이아웃 등등을 정의합니다.
.
.

◎ RenderObject는 화면에 표시되는 실제 UI 요소를 나타냅니다.
.
.

◎ RenderObject는 Widget과 Element 사이에서 동작하며,

        ∇ Widget은 RenderObject를 생성하고 업데이트하기 위한 구성 요소를 제공하고,

        ∇ Element는 RenderObject를 관리하고 렌더링 작업을 수행합니다.

== >> 특정 위젯-인스턴스를 배치하는 일을 담당합니다.

          - 적중 테스트 및 제스처와 같은 사용자 상호 작용도 처리합니다.
          

★ 정리.

  - Widget은 UI 구성을 추상화한 개념.

 

  - Element는 Widget의 구체적인 인스턴스로서,  화면에 대한 정보와 상태를 가지며 렌더링 작업을 수행!



  - RenderObject는 렌더링 엔진에서 실제 UI 요소를 표현하고 그리기 위한 '저수준의 추상화'로서

           크기*위치*그리기*레이아웃 등등을 정의합니다.




    ◎ Widget은 Element로 변환되어지고,   

         Element는 RenderObject와 함께 작동하여 화면에 UI를 그리는 작업을 수행합니다.