83. [Flutter] const, final / class형, Function형 위젯 차이 알아보기

const VS final

const와 final은 둘 다 변수를 상수로 선언할 때 사용되지만, 사용하는 방식과 타이밍이 다릅니다.

1. const의 특징

• 컴파일 타임 상수로, 값이 컴파일 타임에 결정됩니다.
• 주로 변경되지 않는 값을 선언할 때 사용합니다.
• const로 선언된 위젯은 재사용이 가능하며, Flutter의 위젯 트리 재구성에서 불필요한 렌더링을 줄여 성능 최적화에 도움을 줍니다.
• 예: const color = Colors.blue;

2. final의 특징

• 런타임에 한 번만 할당되며, 이후 변경되지 않는 값입니다.
• 값은 런타임에 결정될 수 있습니다.
• final 키워드는 DateTime.now와 같은 런타임에 생성되는 값을 저장할 때 주로 사용합니다.
• 예: final date = DateTime.now();

---

컴파일타임 vs 런타임

1. 컴파일 타임 (Compile-time)

• 컴파일 타임은 코드를 작성하고 컴파일러가 코드를 변환하는 시점입니다.
• 이 단계에서는 컴파일러가 코드를 분석하여 문법 오류를 찾아내고, 코드를 기계어로 번역하거나 최적화하는 작업을 수행합니다.
• const와 같이 컴파일 타임에 고정될 수 있는 값은 컴파일 시점에 결정되어 코드가 실행될 때 다시 계산할 필요가 없습니다.
  이렇게 컴파일 타임에 고정된 값은 메모리에 저장되지 않고 바로 상수 풀에 저장되기 때문에 성능이 더 좋습니다.
• 아래 코드에서 compileTimeValue는 컴파일 타임에 값이 고정되므로, 앱이 실행될 때 더 이상 계산되지 않습니다.

const int compileTimeValue = 42;

2. 런타임 (Runtime)

• 런타임은 프로그램이 실제로 실행되는 시점입니다.
• 런타임 시점에서는 사용자 입력이나 시스템의 상태에 따라 변할 수 있는 값을 다룹니다.
• 예를 들어 DateTime.now()는 앱이 실행되는 시점에 따라 달라지기 때문에 런타임에 결정됩니다.
• 런타임 오류는 코드 실행 중에 발생하며, 주로 배열의 범위를 벗어난 접근, null 값을 참조하는 경우와 같은 오류입니다.
• 아래 코드에서 runtimeValue는 앱이 실행되는 시점에 따라 달라집니다. 매번 실행할 때마다 현재 시간이 달라지므로, 이 값은 컴파일 타임에 고정할 수 없습니다.

final DateTime runtimeValue = DateTime.now();

---

class vs Function 위젯

1. class형 위젯

class형 위젯은 상태를 가질 수 있는 StatefulWidget과 상태가 없는 StatelessWidget으로 구분됩니다.

• 일반적으로 구조가 복잡한 UI나 재사용이 필요한 UI에서 사용됩니다.
• 코드가 더 읽기 쉬워지고 확장성이 뛰어납니다.
• 아래 예시에서 const 생성자를 사용하여 MyWidget이 불필요한 재빌드를 피할 수 있도록 최적화됩니다.

class MyWidget extends StatelessWidget {
  const MyWidget({Key? key}) : super(key: key);  // const로 최적화
  @override
  Widget build(BuildContext context) {
    return Text('Hello, Flutter!');
  }
}

2. Function형 위젯

Function형 위젯은 단순히 함수 형태로 작성되는 Inline 위젯입니다.

• 간단한 UI 요소에 적합하며, 구현이 빠르고 코드가 간결합니다.
• 일반적으로 const와 함께 사용되어 재빌드를 줄이는 효과가 있습니다.
• Function형 위젯은 가볍고 선언이 간단하여, 위젯의 로직이 매우 단순할 때 적합합니다.

Widget myFunctionWidget() => const Text('Hello, Flutter!');

 

const가 성능에 미치는 영향

Flutter에서는 위젯이 트리 내에서 변경되지 않는다면 재구성(rebuild)을 하지 않는 것이 성능에 큰 도움이 됩니다. const로 선언된 위젯은 재사용 가능하여, 동일한 위젯 트리가 여러 번 생성될 때 새로운 인스턴스를 생성하지 않고 기존 인스턴스를 재사용합니다. 이렇게 하면 메모리 사용량이 줄어들고 렌더링 속도가 빨라집니다.

---

클래스형과 함수형 위젯을 함께 사용하기

import 'package:flutter/material.dart';

class CombinedExample extends StatelessWidget {
  const CombinedExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Class & Function Widgets')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            myFunctionWidget('This is a Function Widget'),    // 함수형 위젯 사용
          ],
        ),
      ),
    );
  }
}

// 함수형 위젯 정의
Widget myFunctionWidget(String title) {
  return Container(
    padding: const EdgeInsets.all(16),
    color: Colors.greenAccent,
    child: Text(
      title,
      style: const TextStyle(fontSize: 24, color: Colors.black),
    ),
  );
}

클래스형과 함수형 위젯 선택 기준

• 간단한 UI를 구성하고, 상태나 생명주기 관리가 필요 없다면 함수형 위젯을 사용해도 좋습니다.
• 재사용이 필요하거나 상태 관리와 같은 기능을 요구하는 복잡한 UI에는 클래스형 위젯이 더 적합합니다.

클래스형 위젯과 함수형 위젯의 조합을 통해 적절하게 코드를 구성하면 유지보수성과 가독성을 동시에 높일 수 있습니다.