📄 [문서] Flutter의 세 가지 트리(Widget, Element, RenderObject) 개념

[Cassiiopeia]

📝 기본 개념

Flutter와 Dart를 처음 접하는 상황에서, React와 Spring 개발 경험이 있으시다면 Flutter의 세 가지 트리(Widget, Element, RenderObject) 개념을 React의 컴포넌트 트리와 비교하며 이해하면 도움이 될 거예요. Flutter는 선언형 UI 프레임워크로, React와 비슷하게 “모든 게 위젯”이라는 철학을 따릅니다. 다만, 내부적으로는 Flutter만의 독특한 렌더링 구조가 있다

그렇다고 합니다??

오올 한번 좀 보도록할께요

🎯 본문

1. Flutter의 기본 구조: Widget, Element, RenderObject
   Widget 트리 vs. React 컴포넌트

Widget (Flutter):
React의 JSX 컴포넌트와 유사합니다.

선언적이며, 불변(immutable)입니다.
UI의 “설계도”로, 어떤 요소들이 있어야 하는지 기술합니다.

React 컴포넌트:

상태(state)와 props를 받아 UI를 반환하는 함수나 클래스 컴포넌트입니다.
Virtual DOM을 사용해 변경 사항을 최소로 업데이트합니다.

Element 트리

Element (Flutter):
Widget과 RenderObject 사이의 다리 역할을 합니다.
React의 내부 인스턴스(컴포넌트 인스턴스)에 해당한다고 볼 수 있습니다.
상태 관리(StatefulWidget의 경우)를 포함하고 있으며, Widget의 불변성을 보완합니다.

RenderObject 트리

RenderObject (Flutter):
실제 화면에 그리는 역할을 합니다.
레이아웃, 페인팅, hit-testing 등을 담당합니다.
React에서는 브라우저의 DOM이 실제로 렌더링되는 부분이라고 생각하면 이해하기 쉽습니다.

핵심 포인트:
Flutter는 Widget(설계도) → Element(연결 및 상태 관리) → RenderObject(실제 그리기) 순으로 동작합니다. React는 Virtual DOM에서 실제 DOM으로의 업데이트 방식과 유사하지만, Flutter는 이 세 단계를 분리해 더 세밀한 제어와 성능 최적화를 가능하게 합니다.

React에서 Virual DOM으로 업데이트하는 방식이 아니라
3개로 나누나보군요... 흠...

2. 간단한 Flutter 코드 예제
   아래 코드는 Flutter의 StatelessWidget과 StatefulWidget을 사용한 간단한 카운터 앱 예제입니다. React의 함수형 컴포넌트와 useState 훅을 생각하면 비슷한 개념입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

// StatelessWidget: React의 함수형 컴포넌트와 유사 (불변 위젯)
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Widget 트리의 최상위 구성 요소
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Demo Home Page')),
        body: CounterWidget(), // 상태가 있는 위젯 호출
      ),
    );
  }
}

// StatefulWidget: 상태를 관리해야 할 때 사용
class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int counter = 0; // 상태 변수

  @override
  Widget build(BuildContext context) {
    // Element 트리: 이 함수가 호출될 때마다 Element가 재구성되며 필요한 부분만 업데이트
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('Counter: $counter'),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              setState(() {
                // 상태 업데이트: RenderObject 트리까지 영향을 미쳐 실제 화면 갱신
                counter++;
              });
            },
            child: Text('Increment'),
          ),
        ],
      ),
    );
  }
}

라고합니다

일단 이것만 보고 느낌점은

child 가 뭔지 모르겠고 children이 뭔지 모르겠고
리액트는 state 값이 변경되면 리랜더링이 일어나는데
flutter도 비슷한.... 이... Widget build??? 이 함수가 호출될때 리랜더링이 일어난다고하네요?
한번 더 물어봅시다 정확한 개념을

3. React와 Flutter의 렌더링 차이
렌더링 과정 비교
React:
컴포넌트 렌더링: 함수 혹은 클래스 컴포넌트가 JSX를 반환합니다.
Virtual DOM 업데이트: 변경된 부분만 Virtual DOM에 반영되고, Diff 알고리즘을 통해 실제 DOM 업데이트를 최소화합니다.
Flutter:
Widget 트리 구성: 선언적 방식으로 UI의 설계도를 만듭니다.
Element 트리 생성 및 관리: Widget을 실제 인스턴스로 전환하며, 상태 및 위치 정보 등을 저장합니다.
RenderObject 트리 생성: 실제 화면에 그리기 위한 로우 레벨 객체들이 생성되어, 레이아웃, 페인팅 등의 작업을 수행합니다.

솔직히 이것봐도 뭔지 잘 모르겠습니다
뭔가 리액트보다는 객체개념이 더 들어간다고 생각할께요

전 객체지향적인거 좋아해서 맘에드는군요

1. child vs. children

단일 위젯 지정:
child는 단 하나의 자식 위젯을 받을 때 사용합니다.
예를 들어, Center 위젯은 하나의 자식 위젯을 중앙에 배치합니다.

Center(
  child: Text('Hello, World!'),
)

비교:
React에서

{someComponent}

처럼 단일 자식 요소를 넣는 것과 비슷합니다.

아하 그냥 div군요?

children
여러 위젯 지정:
children은 여러 개의 자식 위젯을 리스트 형태로 받을 때 사용합니다.
예를 들어, Column이나 Row 위젯은 여러 위젯을 세로 혹은 가로로 나열합니다.

Column(
  children: <Widget>[
    Text('First Line'),
    Text('Second Line'),
  ],
)

비교:
React에서 여러 자식을 배열로 구성하여 렌더링하는 것과 유사합니다.

아하... 그냥 안에 여러개 선언하면 위에 Children 하면 되네요?

2. Flutter의 Build 메서드와 리렌더링
   Build 메서드의 역할

UI 선언:
build(BuildContext context) 메서드는 위젯이 자신의 UI를 어떻게 표현할지 선언하는 역할을 합니다.
이 함수는 React의 render 함수와 유사하게, 위젯(또는 컴포넌트)이 화면에 어떤 형태로 보일지 정의합니다.

상태 변경에 따른 호출:
StatefulWidget의 경우, setState()가 호출되면 Flutter는 해당 위젯의 상태가 변경되었음을 감지하고 build 메서드를 다시 호출합니다.
이는 React에서 state가 변경되었을 때 컴포넌트가 다시 렌더링되는 것과 비슷합니다.

3. 핵심 요약
   child vs. children:

child는 단일 자식을 받음.
children은 여러 자식을 리스트 형태로 받음.
Build 메서드와 리렌더링:

build() 메서드는 위젯의 UI를 선언적으로 정의하는 함수입니다.
setState() 호출 시 상태 변경을 감지하여 build() 메서드가 다시 실행되고, 변경된 부분만 업데이트되어 화면이 갱신됩니다.

흠~~~

일단 알겠습니다... 차차 저희 코드를 보면서 더 공부해보겠습니다

📚 기대효과

No response

🔗 관련 자료

No response

🙋‍ 담당자

• 백엔드: 이름
• 프로트엔드: @Cassiiopeia @SeoHyun1024
• 디자인: 이름

더 중요한 꿀팁있다면 전수부탁드려요