79. [Flutter] GetBuilder VS Obx 비교

하나의 위젯에 실시간 감시를 요구하는 값이 2개이며, 각각 다른 컨트롤러에 있기 때문에 컨트롤러를 2개 사용해야하는 상황이 와서 고민을 해보았습니다.

1. GetBuilder

• 목적: 특정 시점에만 UI를 리빌드하기 위한 도구입니다. 컨트롤러의 상태가 변경될 때 update() 메서드를 호출하여 수동으로 UI를 리빌드합니다.
• 성능: GetBuilder는 필요한 시점에만 리빌드를 트리거하므로, 성능 최적화 측면에서 더 유리합니다. 특히 UI 업데이트 빈도가 낮고, 성능이 중요한 경우 GetBuilder가 더 적합합니다.
• 사용 사례: 예를 들어, 페이지 내 특정 UI 요소만 드물게 업데이트되는 상황에 적합합니다.

GetBuilder를 사용할 경우

class ProfileView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GetBuilder<ProfileController>(
          id: 'ProfileController',
          builder: (profileController) {
            return GetBuilder<ThemeController>(
              builder: (themeController) {
                return Row(
                  children: [
                    Switch(
                      value: profileController.isLightMode,
                      onChanged: (value) {
                        profileController.onChanged();
                        themeController.updateTheme(value);
                      },
                    ),
                  ],
                );
              },
            );
          },
        ),
      ),
    );
  }
}

2. Obx

• 목적: 반응형으로 상태를 감시하고, 상태가 변경될 때마다 자동으로 UI를 리빌드하는 도구입니다. Rx(반응형) 변수에 의존하며, 이 변수가 변경될 때마다 UI를 자동으로 업데이트합니다.
• 성능: Obx는 상태 변화에 따라 자동으로 리빌드를 트리거하지만, 그로 인해 불필요한 리빌드가 발생할 수 있습니다. 상태 변화가 자주 발생하거나, 많은 UI 요소가 리빌드되어야 하는 상황에서는 성능에 약간의 영향을 미칠 수 있습니다.

사용 사례: 예를 들어, UI가 자주 업데이트되어야 하거나, 특정 변수의 변경에 즉각적으로 반응해야 하는 경우에 적합합니다.

Obx를 사용할 경우

성능 비교 요약

• 성능 면에서: GetBuilder는 수동으로 업데이트를 제어할 수 있기 때문에, 불필요한 리빌드를 피하고 필요한 시점에만 업데이트할 수 있어 성능 최적화에 유리합니다. 따라서, 성능이 중요한 앱에서는 GetBuilder를 선호하는 것이 좋습니다.
• 반응성 면에서: Obx는 더 간단하고 직관적인 코드를 제공하며, 상태 변화에 즉각적으로 반응하는 것이 중요할 때 유용합니다. 그러나 성능 최적화보다는 편의성과 실시간 반응성을 우선시할 때 더 적합합니다.

결론

• 성능 최적화가 중요한 경우: GetBuilder가 더 적합합니다.
• 사용의 간편함과 즉각적인 반응이 중요한 경우: Obx가 더 적합합니다.

두 가지 도구를 혼합하여, 상황에 맞게 사용하는 것이 가장 좋은 접근법입니다. UI의 성격에 따라 어느 것이 더 적합한지를 판단하고, 필요에 따라 GetBuilder와 Obx를 선택하는 것이 좋습니다.