함수형 위젯 vs 클래스형 위젯, 어떻게 하는게 좋을까?

Flutter 에서 함수형 위젯과 클래스형 위젯 선택을 어떻게 하면 좋을지에 대해서 공부한 내용을 공유합니다.

 

기본적으로 공식(?) 영상을 봤습니다만 생각보다 궁금한 부분들이 잘 해소되진 않았습니다.

https://youtu.be/IOyq-eTRhvo?si=VSz-YpbZeAghi6kS

 

 

 

해당 유튜브 영상을 바탕으로 블로그, Medium 글들을 여럿 읽고 GPT와 열심히 대화를 하면서 학습을 했습니다. 학습을 통해서 얻은 내용을 요약하면 다음 4가지 입니다.

 

클래스형 위젯 vs 함수형 위젯, 4가지 결론

1. UI 가 복잡하면 클래스형 위젯, 복잡하지 않으면 함수형 위젯

2. 재사용을 할것이면 클래스형 위젯, 재사용하지 않을꺼면 함수형 위젯

3. DevTools 로 디버깅 잘하고 싶으면 클래스형 위젯, 디버깅 그따위거 대충 할꺼면 함수형 위젯

4. 캡슐화 해서 사용하고 싶으면 클래스형 위젯, 그렇지 않다면 함수형 위젯

 

성능 차이

클래스형 위젯과 함수형 위젯에 관해서 어디선가 성능 차이에 대한 얘기도 있었습니다. 그래서 성능에 대한 부분을 공부했으며, 공부한 결과는 성능 차이가 거의 찾이가 나지 않는것 같습니다. 단순히 상태관리가 필요하지 않은 위젯을 만든다고 했을때, StatelessWidget 클래스 위젯 써야할지 함수 위젯를 써야할지에 대해서는 크게 고민할 필요가 없습니다.

 

클래스형으로 위젯 혹은 함수형으로 위젯을 만들어도 setState({ ... }) 를 사용해서 상태관리를 한다면 setState({ ... })를 사용하면 해당 StatufullWidget 클래스의 build()가 호출되면서 두가지 형태 위젯 모두 새로운 인스턴스를 만들고 UI를 그리게 됩니다. 만약, const 키워드를 붙힌다면 두 가지 형태의 위젯 모두 처음에 만들어진 인스턴스를 재사용을 하게 됩니다.

 

const 를 사용한 함수형 위젯과 클래스형 위젯

class ParentWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Widget Comparison")),
      body: Column(
        children: [
          const myFunctionWidget('이름'), // 함수 기반
          const MyStatelessWidget('이름'), // 클래스 기반
        ],
      ),
    );
  }
}

// 함수 기반 위젯
Widget myFunctionWidget(String text) {
  print("Function Widget for $text is being built");
  return Text(text);
}

// 클래스 기반 위젯
class MyStatelessWidget extends StatelessWidget {
  final String text;

  const MyStatelessWidget(this.text, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print("StatelessWidget for $text is being built");
    return Text(text);
  }
}

 

 

UI 를 재사용할 가능성(?)이 있거나 or 복잡할 가능성이 보인다면 클래스형 위젯!!

간단하고 해당 클래스에서만 사용할 UI 를 만들고 싶다면 별도의 함수를 만들어서 위젯을 만드는것도 괜찮다고 생각합니다. 굳이 Class 를 만들어서 StatelessWidget 혹은 StatefullWidget 을 상속해서 위젯을 만들 필요는 없습니다. 다만, UI 여러군데 쓰일 예정이라던가, 추후에 복잡도가 올라갈 수 있는 위젯이라고 생각이 든다면 별도의 클래스를 만들어서 만드는게 나을 수도 있습니다. 사실 조금 더 손이 가긴하지만 크게(?) 손이 가는 작업은 아니라고 생각합니다. ^^;;

 

DevTools 를 통해서 디버깅을 하고 싶다면 클래스형 위젯!!

다음과 같은 툴로 에러 디버깅 혹은 퍼포먼스 체크 등의 많은(?) 것들을 확인해볼 수 있습니다. 추후에 에러가 날때 devtool 을 활용하면 에러 해결에 도움이 많이 될것입니다. (maybe...)

 

검색하고 다시 묻고 또 묻고 확인하고 다시 검색하는데 시간이 많이 걸렸습니다. 뭘 하나 제대로 알아가려면 시간이 들어갑니다. 모두 화이팅입니다 :)