함수 vs 클래스 (재사용가능한 위젯을 만들때)

StatelessWidget을 서브클래싱 하는 대신 함수로 만들어서 위젯을 만들수도 있다.

Widget function({ String title, VoidCallback callback }) {
  return GestureDetector(
    onTap: callback,
    child: // some widget
  );
}

class SomeWidget extends StatelessWidget {
  final VoidCallback callback;
  final String title;

  const SomeWidget({Key key, this.callback, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
      return GestureDetector(
        onTap: callback,
        child: // some widget
      );
  }
}

첫 번째는 함수, 두번째는 클래스이다. 함수로 만드는게 훨 짧고 편해보이는데 두 방법의 차이는 무엇일까?

 

둘의 차이점은 크게 없어 보인다. 하지만 작으면서도 큰 차이점이 존재한다. 바로 위젯트리를 그릴경우이다.

 

함수의 경우에는

Container
  Container

위와 같이 그리지만 클래스의 경우에는

ClassWidget
  Container
    ClassWidget
      Container

위와 같이 그려 프레임워크가 업데이트 할때 작동하는 방식에 차이가 생긴다.

중요한 이유

기능을 사용하여 위젯 트리를 여러 위젯으로 분할하면 버그에 노출되고 일부 성능 최적화를 놓치게 됩니다.

함수를 사용하여 버그가 발생한다는 보장은 없지만 클래스를 사용하면 이러한 문제에 직면하지 않을 수 있습니다.

다음은 문제를 더 잘 이해하기 위해 직접 실행할 수 있는 Dartpad의 몇 가지 예제입니다.

• https://dartpad.dev/1870e726d7e04699bc8f9d78ba71da35
• https://dartpad.dev/a869b21a2ebd2466b876a5997c9cf3f1
• https://dartpad.dev/06842ae9e4b82fad917acb88da108eee
  
  

결론

다음은 함수와 클래스 사용의 차이점을 보여줍니다.

1. 클래스:

• 성능 최적화 허용(const 생성자, 보다 세분화된 재구축)
• 두 개의 다른 레이아웃 간 전환이 리소스를 올바르게 처리하는지 확인가능(함수는 이전 상태를 재사용할 수 있음).
• 핫 리로드가 제대로 작동하는지 확인합니다(함수를 사용하면 핫 리로드가 중단될 수 showDialogs있음)
• 위젯 인스펙터에 통합되어 있습니다.
  • ClassWidget화면에 무엇이 있는지 이해하는 데 도움이 되는 devtool이 표시하는 위젯 트리에서 볼 수 있습니다.
  • debugFillProperties 를 재정 의하여 위젯에 전달된 매개변수가 무엇인지 인쇄 할 수 있습니다.
• 더 나은 오류 메시지
  예외가 발생하면(예: ProviderNotFound) 프레임워크는 현재 빌드 중인 위젯의 이름을 제공합니다. 기능 +에서만 위젯 트리를 분할한 경우 Builder오류에 유용한 이름이 없습니다.
• 키를 정의할 수 있습니다
• 컨텍스트 API를 사용할 수 있습니다

1. 기능:

• 코드가 적습니다(코드 생성 기능적 위젯을 사용하여 해결할 수 있음 ).