[Flutter] Helper Method vs Widget Class

개발 중 코드가 길어지면 들여쓰기가 많아져서 코드를 분리한다.
여기서 필자는 Widget Class로 분리하는 경우는 별로 없고, Helper Method를 주로 사용했다.
당연히 한 파일 안에서 관리하면 알아보기도 쉽고 편하다고 생각했는데, 위젯 규모가 커졌을 때에는 경우가 다르겠더라. 간단한 개념인데 놓치고 있었던 것 같아서 Widget vs Helper Method - Flutter Youtube 영상을 보고 정리하려 한다.

먼저, Helper Method를 사용한 아래 방식을 보자.

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int counter = 0; // 상태 변수

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        HeavyWidget(), // 무거운 위젯
        _seperatedButton(),
        HeavyWidget(), // 무거운 위젯
      ],
    );
  }

  // Helper Method
  Widget _seperatedButton() {
    return FilledButton(
      onPressed: () => setState(() {
        counter++; // 1씩 증가
      }),
      child: Text("$counter"),
    );
  }
}

위와 같이 화면이 구성되어 있다고 가정하겠다.
무거운 HeavyWidget 2개 사이에 _seperatedButton이 있다.
나는 보통 위와 같이 Helper Method를 사용하여 분리한다.
들여쓰기가 줄고, 위젯이 차지하는 범위를 확실히 알 수 있어서 편하다.

❗ 하지만 불필요한 rebuild가 발생할 수 있다

_seperatedButton안에서 setState가 호출되면, HeavyWidget을 포함한 모든 위젯이 다시 빌드된다.
여기서 실제로 UI가 바뀌는 부분은 _seperatedButton의 텍스트 부분밖에 없는데, 무거운 HeavyWidget까지 다시 빌드하는 것이다.

Flutter에서는 필요한 부분만 빌드하기 위해서 가능하면 그 부분을 Widget Class를 나눠서 작성하는 방법을 권장하고 있다.
다시 빌드하는 범위가 좁아지기 때문이다.