Flutter 위젯 사용시 안티 패턴(Anti-pattern)

🧩 짧은 코드가 좋은 코드?

플러터에서 페이지뷰를 만들면 build method의 코드 영역이 커진다.
복잡한 페이지뷰를 완성하고 다음에 수정하려고 하면 위젯들이 너무 많아서 가독성이 떨어진다.
그래서 최대한 짧은 코드를 지향하고 위젯을 영역별로 분리하는 것을 습관처럼 한다.

한 가지, 자주 볼 수 있는 형태를 살펴보자.

// 일반적인 페이지
@override
Widget build(BuildContext context){
  return Scaffold(
    appBar: AppBar(...)
    body: Container(
      child: Column(
        children:[...],
      ),
    );
}

여기서 AppBar에도 버튼과 기능이 많이 들어가고, body 부분도 100줄, 200줄 가볍게 넘기기 때문에 코드가 긴 위젯을 분리하고 싶은 욕구가 생긴다.

// 분리 후
@override
Widget build(BuildContext context){
  return Scaffold(
    appBar: _buildAppBar(),
    body: _buildBody(),
  );
}

_buildAppBar(){
  return ...;
}

_buildBody(){
  return ...;
}

빌드 메써드 부분이 깔끔해졌다.
바디 부분도 예시에서는 하나로 분리했지만 여러개로 분리하는 경우도 있다.
유튜브에 있는 플러터 영상을 보더라도 빈번하게 찾을 수 있다.

이렇게 Widget을 method로 호출하는 형태는 바람직하지 않다.

😭 누구를 위한 빌드인가...

Why?
아무 의미 없는 빌드를 호출하기 때문!

만약 클래스 내부 변수가 body 부분에 표시되는데 값에 변화가 있어서 변경된 값으로 표시해주기 위해 StatefulWidget에서 setState()를 호출했다면 build() 부분이 실행된다.

우리가 다시 그릴 필요가 있는 부분은 _buildBody() 부분이다.
하지만 _buildAppBar()도 다시 rebuild한다.
불필요한 일을 상태가 바뀔 때마다 열심히 한다 ㅠㅠ

위젯 생성 시 흔히 하는 안티패턴이다.
그럼 어떻게 하는게 좋을까?

👍 Good!

예시에서 앱바를 constant하게 만들어주면 된다.
const는 심지어 컴파일 타임에서 만들어지기 때문에 런타임에서 앱바를 그릴 필요도 없어 더욱 성능에 유리하다.

// Good!
@override
Widget build(BuildContext context){
  return Scaffold(
    appBar: const _AppBar(),
    body: ...,
  );
}
...

class _AppBar extends StatelessWidget{
  const _AppBar();
  
  @override
  Widget build(BuildContext context){
    return ...
  }
}

이렇게 하면 코드가 짧아지는건 아니다. 오히려 길어진다.
이게 더 플러터답고 아름다운 코드라고 생각한다.
Short ≠ Simple

제가 잘못 알고 있는 부분에 대한 지적이나 의문 제기는 언제나 환영합니다!