Flutter의 렌더링 파이프라인: Build 단계 이해하기

Flutter는 뛰어난 성능과 부드러운 애니메이션을 제공하는 UI 프레임워크입니다. 이러한 성능을 유지하기 위해 내부적으로 렌더링 파이프라인을 활용하는데, 이 과정은 크게 Build → Layout → Paint 단계로 나뉩니다.

이번 글에서는 그중에서도 첫 번째 과정인 Build 단계에 대해 자세히 알아보겠습니다. 이 단계에서는 화면을 구성하는 위젯 트리(Widget Tree) 를 생성하며, 상태 변화가 발생할 때마다 빌드가 다시 실행됩니다.

1. Flutter의 렌더링 파이프라인

Flutter에서 UI가 화면에 표시되는 과정은 다음 세 단계로 진행됩니다.

1. Build 단계: 위젯 트리를 생성하고 업데이트하는 단계입니다.
2. Layout 단계: 위젯의 크기와 위치를 계산하는 과정입니다.
3. Paint 단계: 실제 화면에 UI를 렌더링하는 단계입니다.

이 중에서 Build 단계는 가장 먼저 실행되며, 이후 과정에 직접적인 영향을 미칩니다. 따라서 Build 단계를 효율적으로 관리하는 것이 중요합니다.

2. Build 단계에서 발생하는 일

Build 단계에서는 개발자가 작성한 위젯 트리(Widget Tree) 가 생성됩니다. 하지만 Flutter는 단순히 위젯을 화면에 그리는 것이 아니라, 내부적으로 다음과 같은 세 가지 트리 구조를 활용하여 성능을 최적화합니다.

1) 위젯 트리 (Widget Tree)

위젯 트리는 개발자가 build() 함수에서 반환하는 구조로, UI 요소의 계층을 나타냅니다. 하지만 이 트리는 매번 새로 생성되기 때문에 성능적으로 부담이 될 수 있습니다.

2) 엘리먼트 트리 (Element Tree)

Flutter는 위젯이 자주 변경되더라도 전체 트리를 다시 생성하는 대신, Element Tree를 유지하며 변경된 부분만 업데이트합니다. Element는 위젯과 1:1로 연결되며, StatelessElement와 StatefulElement로 나뉩니다.

3) 렌더 트리 (Render Tree)

실제 화면에 그려질 요소를 관리하는 구조입니다. 크기와 위치가 계산된 후, 렌더 트리를 통해 UI가 그려집니다.

3. StatefulWidget과 StatelessWidget의 차이

Flutter의 위젯은 크게 StatelessWidget과 StatefulWidget으로 나뉩니다.

• StatelessWidget: 내부 상태가 없으며, 한 번 생성되면 변경되지 않습니다.
• StatefulWidget: setState()를 호출하면 Build 단계가 다시 실행되면서 UI가 변경됩니다.

이 차이를 이해하면, 불필요한 빌드를 줄이는 데 도움이 됩니다.

4. BuildContext와 Element

BuildContext는 위젯 트리에서 현재 위치를 나타내며, 위젯 간의 관계를 찾는 데 사용됩니다.

• context.findAncestorWidgetOfExactType<>()을 사용하면 부모 위젯을 찾을 수 있습니다.
• BuildContext는 실제로 Element에 연결되어 있어, 위젯이 변경되더라도 Element는 유지됩니다.

5. 위젯이 다시 빌드되는 조건

위젯이 다시 빌드되는 대표적인 경우는 다음과 같습니다.

1. setState()가 호출될 때
2. 부모 위젯이 변경될 때 (예: 상위 위젯이 build()를 다시 실행하면 자식 위젯도 영향을 받음)
3. InheritedWidget이 변경될 때 (of(context)를 통해 데이터를 가져오는 경우)
4. Navigator를 통해 다른 화면으로 이동했다가 돌아올 때

불필요한 빌드를 줄이는 방법

• const 키워드를 사용하여 StatelessWidget을 최적화할 수 있습니다.
• shouldRebuild를 활용하여 필요한 경우에만 빌드되도록 설정할 수 있습니다.

6. 결론

Build 단계는 Flutter의 렌더링 파이프라인에서 가장 중요한 과정 중 하나로, 위젯 트리 → 엘리먼트 트리 → 렌더 트리가 생성되는 과정입니다.

위젯이 다시 빌드되는 조건을 잘 이해하고 불필요한 빌드를 방지하면, 보다 효율적인 앱을 만들 수 있습니다. 특히 const 사용과 shouldRebuild를 통한 최적화는 성능 개선에 큰 도움이 됩니다.

Flutter의 렌더링 과정이 궁금하셨다면, 이번 글을 통해 Build 단계를 이해하는 데 도움이 되셨길 바랍니다!

오늘도 즐코 빡코 !!