렌더링 할때 어떤 과정을 거치나?

Flutter 앱이 렌더링되는 과정은 여러 단계로 이루어져 있으며, 이 과정에서 Flutter는 위젯 트리를 분석하고 레이아웃을 계산한 후, 최종적으로 UI를 화면에 표시합니다. 아래는 Flutter 앱의 렌더링 과정을 단계별로 설명한 내용입니다.

1. 위젯 트리 생성 (Widget Tree Creation)

• Flutter의 기본 구성 요소는 위젯입니다. 앱이 시작되면 Dart 코드를 통해 위젯 트리가 구성됩니다.
• 위젯 트리는 계층적으로 구성되며, 최상위 위젯부터 자식 위젯까지 계층적으로 내려가는 구조입니다. 이 트리에는 앱의 모든 UI 요소가 포함됩니다.
• 이때 위젯은 그 자체로 시각적인 요소가 아니라, 화면을 어떻게 구성할지를 설명하는 일종의 "설명서"에 해당합니다.

2. 빌드 단계 (Build Phase)

• Flutter는 build 메서드를 호출하여 위젯 트리를 실제로 구축하고, 이를 바탕으로 렌더링 트리를 만듭니다.
• 빌드 단계에서는 위젯의 build 메서드가 호출되며, 이 과정에서 실제 UI 구조와 관련된 정보가 결정됩니다.
• 이 단계에서는 StatefulWidget이나 StatelessWidget이 어떻게 표시될지에 대한 정의가 이루어집니다.

3. 요소 트리 생성 (Element Tree Creation)

• 위젯 트리가 생성되면 Flutter는 이를 바탕으로 **요소 트리(Element Tree)**를 생성합니다. 요소 트리는 위젯 트리와 달리 실제 UI 요소를 화면에 배치하는 역할을 합니다.
• 요소 트리는 위젯의 인스턴스와 UI를 구체적으로 연결하여 화면에 표시하는 중간 역할을 합니다.
• 이 단계에서 각 위젯 인스턴스가 고유의 요소(Element)를 가지게 됩니다.

4. 렌더 트리 생성 (Render Tree Creation)

• Flutter는 요소 트리를 기반으로 **렌더 트리(Render Tree)**를 생성합니다. 이 트리는 실제 화면에 표시되는 시각적 요소를 포함하며, 각 요소는 레이아웃 정보와 관련된 데이터를 가집니다.
• 렌더 트리는 화면에 표시되는 레이아웃과 관련된 모든 정보를 가지고 있으며, 이 트리를 기반으로 화면에 표시할 위치와 크기 등이 결정됩니다.

5. 레이아웃 단계 (Layout Phase)

• 렌더 트리가 생성되면 각 렌더 요소에 대해 레이아웃 계산이 수행됩니다.
• 레이아웃 단계에서는 부모 요소와 자식 요소 간의 크기와 위치 관계를 계산합니다. 예를 들어, Column이나 Row와 같은 위젯은 자식 요소들이 어떻게 배치될지를 정의합니다.
• 이 단계에서 각 요소의 위치, 크기, 여백 등이 결정되며, 최종적인 UI 레이아웃이 형성됩니다.

6. 페인팅 단계 (Painting Phase)

• 레이아웃 계산이 완료되면 페인팅 단계에서 실제 화면에 시각적 요소를 그리는 작업이 진행됩니다.
• Flutter는 렌더 트리의 정보를 바탕으로 캔버스에 위젯을 그립니다. 이 캔버스는 Flutter 엔진이 사용하는 2D 그래픽스 라이브러리인 Skia에서 제공됩니다.
• 페인팅 단계에서는 각 요소가 화면의 어느 위치에, 어떤 크기로, 어떤 색상과 스타일로 그려질지를 결정하고, 최종 화면에 이를 렌더링합니다.

7. 합성 단계 (Compositing Phase)

• 페인팅이 끝나면 Flutter는 여러 레이어(layer)를 합성하여 최종적으로 화면에 표시합니다.
• 합성 단계에서는 각 레이어가 스크린의 픽셀에 맞게 렌더링되고 결합되어 하나의 완전한 화면이 됩니다. 이를 통해 Flutter는 효율적인 그래픽 처리를 구현할 수 있습니다.

8. 디스플레이 단계 (Display Phase)

• 마지막으로, 합성된 화면이 실제 디스플레이 장치에 전달되어 사용자에게 보이게 됩니다.
• 이 단계는 Flutter 엔진이 GPU를 통해 최종 화면을 디스플레이로 출력하는 과정입니다.

요약

1. 위젯 트리 생성: 위젯을 이용해 앱 구조를 정의.
2. 빌드 단계: build 메서드 호출로 UI 구조 결정.
3. 요소 트리 생성: 위젯과 실제 UI 연결.
4. 렌더 트리 생성: 렌더링에 필요한 시각적 요소 생성.
5. 레이아웃 단계: UI 요소의 위치 및 크기 결정.
6. 페인팅 단계: 화면에 그릴 정보를 캔버스에 그림.
7. 합성 단계: 여러 레이어를 합성하여 최종 화면 생성.
8. 디스플레이 단계: 최종 화면이 사용자에게 표시.

이 과정에서 Flutter는 위젯의 변경 사항을 감지하고 필요할 때마다 위젯 트리의 특정 부분만을 재빌드하여 효율적으로 렌더링을 관리합니다.