다트 이해하기 - (5) Flutter의 createElement 함수

---

Flutter의 createElement 함수란?

Flutter에서 UI는 위젯(Widget)을 기반으로 구성됩니다. 위젯은 화면의 시각적 요소를 정의하지만, 자체적으로 렌더링되거나 상태를 유지하지는 않습니다. 이 역할은 Element라는 객체가 담당합니다. createElement 함수는 위젯이 Element를 생성하는 데 사용되는 중요한 메서드입니다. 이 글에서는 createElement의 역할과 사용 방법을 초보자도 쉽게 이해할 수 있도록 설명하겠습니다.

---

Element와 Widget의 차이

Flutter에서 Widget과 Element는 밀접하게 연결되어 있지만 역할이 다릅니다.

• Widget: UI의 정적인 설명서(blueprint)로, 화면에 표시할 구조와 스타일을 정의합니다.
• Element: Widget의 구체적인 구현체로, 렌더링 트리에서 위젯을 관리하고 상태를 유지합니다.

createElement 함수는 Widget에서 Element를 생성하는 데 사용됩니다.

---

createElement의 역할

Flutter의 모든 위젯은 createElement 메서드를 가지고 있습니다. 이 메서드는 위젯을 기반으로 올바른 타입의 Element를 생성합니다.

• StatelessWidget: StatelessElement를 생성합니다.
• StatefulWidget: StatefulElement를 생성합니다.
• RenderObjectWidget: RenderObjectElement를 생성합니다.

이렇게 생성된 Element는 위젯 트리와 렌더링 트리에서 중요한 역할을 합니다.

---

createElement 함수의 기본 구조

Flutter에서는 createElement가 위젯 클래스 내에서 오버라이드(Override)될 수 있습니다. 아래는 기본적인 사용 예입니다.

기본 예제:

@override
Element createElement() {
  return MyCustomElement(this);
}

이 코드는 현재 위젯에서 새로운 Element를 생성하며, 이 Element는 UI 트리에서 위젯을 관리하는 역할을 합니다.

 

---

실제 예제: 커스텀 위젯과 createElement

아래는 createElement를 사용하여 커스텀 위젯과 Element를 정의하는 간단한 예제입니다.

1. 커스텀 위젯 정의

import 'package:flutter/widgets.dart';

// 커스텀 위젯
class MyCustomWidget extends Widget {
  final String message;

  MyCustomWidget(this.message);

  @override
  Element createElement() {
    return MyCustomElement(this);
  }
}

 

2. 커스텀 Element 정의

class MyCustomElement extends Element {
  MyCustomElement(MyCustomWidget widget) : super(widget);

  @override
  void mount(Element? parent, dynamic newSlot) {
    super.mount(parent, newSlot);
    print('Element Mounted: ${(widget as MyCustomWidget).message}');
  }

  @override
  void update(Widget newWidget) {
    super.update(newWidget);
    print('Element Updated: ${(widget as MyCustomWidget).message}');
  }
}

 

3. 사용 예제

void main() {
  final widget = MyCustomWidget('Hello, Flutter!');
  final element = widget.createElement();

  element.mount(null, null); // Element가 트리에 추가됨
}

 

---

createElement가 중요한 이유

1. 위젯 트리와 렌더링 트리 연결:
   • createElement는 위젯 트리와 렌더링 트리 간의 연결을 담당합니다. 이를 통해 Flutter는 효율적으로 UI를 업데이트하고 다시 그립니다.
2. 커스텀 위젯 개발:
   • 특별한 요구 사항이 있을 때, createElement를 오버라이드하여 커스텀 위젯과 Element를 정의할 수 있습니다.
3. 성능 최적화:
   • Element는 상태를 유지하므로 Flutter는 위젯 트리를 완전히 다시 그리지 않고도 UI를 효율적으로 업데이트할 수 있습니다.

 

createElement와 Flutter 생명주기

createElement는 Flutter 위젯의 생명주기에서 초기 단계에 호출됩니다. 아래는 주요 생명주기 단계를 요약한 것입니다:

1. Widget 생성: 위젯 트리에서 새 위젯이 생성됩니다.
2. Element 생성: 위젯의 createElement 메서드가 호출되어 Element가 생성됩니다.
3. mount: Element가 부모 트리에 연결되고 초기화됩니다.
4. build: Element가 위젯의 UI를 렌더링합니다.