Flutter) Widget 생성 Class vs Function

Flutter에서 widget을 생성할 때, class를 이용하여 생성할 수도 있고, function으로 생성할 수도 있다.

 

모든 ui 컴포넌트는 widget이고,

widget은 class를 이용하여 stateful, stateless widget으로 생성하는 것으로 처음 배울 수 있었기 때문에

class를 이용해서 생성하는 것이 당연하다고 생각했었다.

 

하지만 function으로 위젯을 생성하는 코드들도 볼 수 있었고, 왜 그렇게 이용하는지 물어보니 

코드가 짧아진다는 장점이 있었다.

// class
class CustomWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}


// function
Widget CustomWidget() {
  return Container();
}

 

 

하지만 function으로 widget을 작성하게 될 경우 widget을 업데이트할 때 flutter 프레임워크가 행동하는 방식이 변한다고 한다.

 

class CustomWidget extends StatelessWidget {
  final Widget child;
	
  @override
  Widget build(BuildContext context) {
    return Container(
       child: child
     );
  }
}

CustomWidget(
  child: CustomWidget()
)

/** 이 경우 위젯트리는
 * 	CustomWidget
 *		Container
 *			CustomWidget
 *				Container
 */

// function
Widget CustomWidget({Widget child}) {
  return Container(
    child: child
  );
}

CustomWidget(
  child: CustomWidget()
)

/** 이 경우 위젯트리는
 *	Container
 *		Container
 */

 

단순히 코드만 보더라도 class 방식은 widget의 life cycle에서 build가 일어나는 과정이 포함되어 있는데,

function 방식의 경우 class에서 override하는 build method가 작동하지 않는다.

따라서 function 기반의 CustomWidget의 경우 위젯트리에 포함이 되지 않는다.

따라서 자식 widget의 변화를 통해 부모 widget을 업데이트할 때 문제가 발생할 수 있다.

 

또한 성능 최적화에서 문제가 발생할 여지가 있다고 한다.

 

StatefulWidget과 StatelessWidget은 키(StatefulWidget에서는 Global Key를 이용하여 위젯의 subtree를 캐싱 한다.)에 기반한 특별한 캐시 메커니즘이 있어서 필요할 때만 재빌드를 하는데, 

(StatelessWidget은 어떤 캐시 메커니즘이 있는지는 잘 모르겠음. 공식 문서에는 StatelessWidget에서의 캐시 메커니즘은 설명돼있지 않음.)

function기반 위젯을 이용하게 되면 캐싱되지 않고 그대로 다시 빌드가 일어나기 때문에 CPU 사이클의 낭비가 일어난다고 한다.

 

따라서 function 보다는 class 기반으로 위젯을 생성하자.