[Flutter] 위젯(Widget) 과 엘리먼트(element) 그리고 렌더 오브잭트(RenderObject)

플루터를 공부하려고 여러사이트 들을 들어가니니 Widget이나 Element,RenderObject 있었습니다. 그렇다면 그특징은 무었이고 또 차이는 무었일까요?

 

Widget

 

• Widget은 Flutter에서 UI를 구축하기 위한 기본적인 구성 요소입니다.
• Widget은 화면에 무엇을 그릴지에 대한 정보를 가지고 있으며, 재사용 가능하고 조합 가능한 조각들로 구성됩니다.
• Widget은 불변(immutable)하며, 한 번 정의된 후에는 변경되지 않습니다.
• Widget은 특정한 구조, 레이아웃, 스타일, 상태 및 상호작용을 정의할 수 있습니다.
• Widget은 화면에 렌더링될 때 Element로 변환됩니다.

=>  프레임워크의 공개 API 또는 청사진입니다. 개발자는 일반적으로 위젯 구성만 처리합니다.

 

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를 관리하고 렌더링 작업을 수행합니다.

=> 특정 위젯 인스턴스를 배치하는 일을 담당합니다. 적중 테스트 및 제스처와 같은 사용자 상호 작용도 처리합니다.

 

https://www.kodeco.com/books/flutter-apprentice/v1.0/chapters/4-understanding-widgets

결과적으로 Widget은 UI 구성을 추상화한 개념이고, Element는 Widget의 구체적인 인스턴스로서 화면에 대한 정보와 상태를 가지며 렌더링 작업을 수행합니다. RenderObject는 렌더링 엔진에서 실제 UI 요소를 표현하고 그리기 위한 저수준의 추상화로서 크기, 위치, 그리기, 레이아웃 등을 정의합니다. Widget은 Element로 변환되고, Element은 RenderObject와 함께 작동하여 화면에 UI를 그리는 작업을 수행합니다. 이

 

참고 :

https://medium.flutterdevs.com/how-flutter-renders-widgets-34d4f272b3c3

How Flutter Renders Widgets?

https://www.kodeco.com/books/flutter-apprentice/v1.0/chapters/4-understanding-widgets

Flutter Apprentice, Chapter 4: Understanding Widgets