• 카테고리

    질문 & 답변
  • 세부 분야

    모바일 앱 개발

  • 해결 여부

    미해결

Funtion vs StatelessWidget 질문!!!

23.01.24 15:27 작성 조회수 315

0

안녕하세요!!

강의를 듣다가 궁금한점이 생겨 질문드립니다.

해당 강의에서 state가 필요하지 않은

위젯을 만들때 단순히 Widget을 return 하는

함수를 사용하여 위젯을 만드시더라구요!

 

근데 제가 다른 강의를 들었을 때는

state가 없는 위젯의경우 statelessWidget을 사용했었는데,

혹시 statelessWidget을 사용하지 않고

함수를 사용하시는 특별한 이유가 있으실까요?

추가적으로

statelessWidget을 사용할때와

함수를 사용할때 어떤 차이가 있는건지 설명해주시면

감사하겠습니다!!


Widget loadingWidget() {
  return Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        Text('정보를 가져오는중'),
        CircularProgressIndicator(),
      ],
    ),
  );
}
Widget buildRemainWidget(Store store) {
  var remainStat = '판매중지';
  var description = '판매중지';
  var color = Colors.black;

  switch (store.remainStat) {
    case 'plenty':
      remainStat = '충분';
      description = '100개이상';
      color = Colors.green;
      break;
    case 'some':
      remainStat = '보통';
      description = '30 ~ 100 개이상';
      color = Colors.yellow;
      break;
    case 'few':
      remainStat = '부족';
      description = '2 ~ 30개이상';
      color = Colors.red;
      break;
    case 'empty':
      remainStat = '소진임박';
      description = '1개 이하';
      color = Colors.grey;
      break;
    default:
  }

  return Column(

 

답변 1

답변을 작성해보세요.

0

좋은 질문 주셨습니다.

loadingWidget()와 buildRemainWidget() 모두 헬퍼 메서드라고 부르는데요. 만약 ListView 등에서 반복적으로 여러번 호출된다면 헬퍼 메서드 보다 const 생성자를 가지는 StatelessWidget으로 분리하는 것이 자원 소모가 적습니다.

여기서는 해당 헬퍼 메서드들이 반복적으로 호출되지 않기 때문에 특별히 성능에 영향을 주지 않습니다. 가독성이나 편리성을 위해서 단순히 코드를 분리한 것입니다.

RemainStatListTile 클래스가 StatelessWidget 으로 이미 분리가 되어 있기 때문에 이 안에서의 헬퍼메서드는 딱 한 번만 호출되며, RemainStatListTile 이 ListView 안에서 여러번 호출되면 const 생성자를 가지고 있기 때문에 메모리에 생성된 인스턴스를 재활용하게 되어 효율적으로 사용이 됩니다. 따라서 여기서 헬퍼 메서드는 가독성 차원에서 코드를 분리한 것이며 성능적으로 손해가 전혀 없습니다.

소스는 Null-Safety가 적용된 https://github.com/junsuk5/flutter_mask/blob/null-safety/lib/ui/widget/remain_stat_list_tile.dart 를 토대로 설명드립니다.

반대로 const 생성자가 없으면 매번 인스턴스가 생성되기 때문에 반복 호출시 자원이 많이 소모됩니다.

만약에 뭘 사용해야 할 지 고민이 된다면 const 생성자를 가지는 StatelessWidget을 쓰시면 됩니다.

이에 대해서 도움이 될 만한 영상이 있어서 함께 공유 드립니다.

https://youtu.be/IOyq-eTRhvo

참고로 강의 출시가 21년 인데요. 그 당시에는 저도 이러한 차이점을 잘 모르고 있었으나 위 영상이 공개되고 차이점을 명확히 알게 되었네요.