[Flutter]위젯 정의 방식(Class형 / 함수형)

부끄럽지만, 플러터를 진득하게 공부를 하고 프로젝트에 투입이 된게 아니다보니
지금에 와서야 당연히 알고있어야할 부분을 학습하게 된다.
Class형과 함수형을 명확하게 구분하지 않고 사용을 했던 스스로가 부끄럽다.

아래 링크에서 플러터팀의 입장을 알 수 있다.
https://www.youtube.com/watch?v=IOyq-eTRhvo

핵심적으로는 재사용 가능한 위젯 트리를 만들려면 함수보다 클래스를 사용하는 것이 권장된다.

클래스를 활용한 방식

Flutter에서는 StatelessWidget 또는 StatefulWidget을 상속받아 새로운 위젯 클래스를 정의할 수 있다.
이 방식을 사용하면, 위젯의 구조를 클래스로 캡슐화하고, 재사용성을 높일 수 있다.
클래스 내부에는 생성자를 통해 외부에서 데이터를 전달받을 수 있고, 메서드를 통해 내부 로직을 구현할 수 있다.
또한, 클래스 기반의 위젯은 상태 관리에도 용이하며, StatefulWidget의 경우 내부 상태를 가질 수 있다.

예시:

class CustomButton extends StatelessWidget {
  final String label;
  final VoidCallback onPressed;

  const CustomButton({
    Key? key,
    required this.label,
    required this.onPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(label),
    );
  }
}

이 예시에서 CustomButton 클래스는 StatelessWidget을 상속받아 구현되었으며, 레이블과 클릭 이벤트를 생성자를 통해 전달받는다.
클래스를 사용하면 이런 식으로 재사용 가능한 UI 컴포넌트를 만들 수 있다.

함수를 활용한 방식

함수를 사용하여 직접 위젯을 반환하는 방식은 보통 간단한 UI 조각을 구성할 때 유용하다.
함수 방식은 위젯 트리 내 특정 위치에서만 사용되는 단순한 UI 구성에 주로 사용된다.
이 방식은 코드의 재사용성은 낮지만, 간결하게 UI를 정의할 수 있는 장점이 있다.

예시:

Widget buildCustomButton(String label, VoidCallback onPressed) {
  return ElevatedButton(
    onPressed: onPressed,
    child: Text(label),
  );
}

이 예시에서 buildCustomButton 함수는 ElevatedButton 위젯을 생성하여 반환한다.
이 방식은 위젯의 재사용보다는 특정 UI 구성을 위한 간단하고 직관적인 접근 방식을 제공한다.

차이점 요약

클래스 방식:

재사용성과 구조화에 유리
생성자를 통한 데이터 전달 및 메서드를 통한 로직 구현 가능
상태 관리가 용이 (StatefulWidget)

함수 방식:

간결하고 직관적인 코드 작성
특정 UI 구성에 한정된 사용에 적합
코드의 재사용성은 낮지만, 작성과 이해가 쉬움

중요한 건, 프레임워크는 함수를 인식하지 못하지만 클래스는 인식할 수 있다.

결국, 클래스 방식과 함수 방식 중 선택은 개발자의 목적, 위젯의 복잡성, 재사용의 필요성 등 여러 요소를 고려하여 결정되어야 한다.
클래스를 사용하면 코드의 재사용성과 구조화 측면에서 이점이 있지만,
간단한 UI 조각을 구성할 때는 함수 방식이 더 효율적일 수 있다.