해당 영상을 보고 정리하는 글입니다.
https://www.youtube.com/watch?v=IOyq-eTRhvo

Flutter 개발을 하다 보면 UI가 점점 복잡해지고, 어느 순간 빌드 메서드가 너무 커지는 문제를 마주하게 된다. 이때 코드 정리를 위해 Helper Method로 분리하거나 새로운 Widget으로 분리하는 두가지 방법을 고민하게 된다.

Helper Method가 편리해 보이지만, 실제로는 별도 위젯을 만드는 것이 더 좋은 선택인 경우가 많다.

1. Helper Method vs Widget

Helper Method

Helper Method는 현재 위젯 내부에서 특정 UI 조각을 메서드로 분리하는 방식

  Widget _buildListItem({VoidCallback? onTap, required String title}) {
    return ListTile(
      onTap: onTap,
      leading: Icon(Icons.star),
      title: Text(title),
    );
  }

Widget

새로운 위젯 클래스를 만들어 분리하는 방식

class ListItem extends StatelessWidget {
  final VoidCallback? onTap;
  final String title;
  const ListItem({super.key, this.onTap, required this.title});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      onTap: onTap,
      leading: Icon(Icons.star),
      title: Text(title),
    );
  }
}

2. 별도 위젯이 더 나을까?

성능 최적화

Flutter에서 setState()가 호출되면, 해당 위젯의 build()메서드가 다시 실행된다. 만약 Helper Method를 사용하면 불필요하게 전체 위젯이 다시 빌드될 수 있다.

애니메이션 최적화

애니메이션이 적용된 UI 요소가 Helper Method 내부에 있으면, UI 전체가 불필요하게 다시 그려질 수 있다. 별도 위젯을 만들면 애니메이션 대상만 리빌드할 수 있어 훨씬 부드러운 동작이 가능하다.

테스트 작성 용이성

별도 위젯을 사용하면 독립적인 단위 테스트 작성이 가능하지만, Helper Method는 의존성이 많아 테스트가 어려워진다.

BuildContext 관련 버그 방지

BuildContext를 잘못 사용하면 예기치 않은 UI버그가 발생할 수 있다. 별도 위젯을 만들면 불필요한 BuildContext 참조 문제를 예방할 수 있다.

3. 결론

빌드 메서드가 커질 때, Helper Method보다 새로운 위젯을 만드는 것이 더 좋은 선택이다.