[flutter] 플러터 Checkbox 성능 최적화하기

07 Dec 2023

flutter

Flutter에서 Checkbox를 사용하여 사용자가 선택한 값을 표시하고 관리할 수 있습니다. 그러나 Checkbox가 화면에서 많이 사용될 경우 성능에 문제가 발생할 수 있습니다. 이를 해결하기 위해 Checkbox의 성능을 최적화하는 방법을 알아보겠습니다.

1. StatefulWidget 사용

Checkbox의 상태를 관리하기 위해 StatefulWidget을 사용하는 것이 좋습니다. StatefulWidget은 상태가 변경될 때마다 위젯을 다시 빌드하지 않기 때문에 성능상 이점이 있습니다.

class MyCheckbox extends StatefulWidget {
  @override
  _MyCheckboxState createState() => _MyCheckboxState();
}

class _MyCheckboxState extends State<MyCheckbox> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Checkbox(
      value: isChecked,
      onChanged: (value) {
        setState(() {
          isChecked = value;
        });
      },
    );
  }
}

2. State의 상태 업데이트 최적화

Checkbox의 상태가 변경될 때마다 위젯을 다시 렌더링하는 것은 성능 저하의 원인이 될 수 있습니다. 이를 최적화하기 위해 setState()에서 상태를 변경할 때마다 위젯을 다시 렌더링하지 않도록 조치해야 합니다.

class _MyCheckboxState extends State<MyCheckbox> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Checkbox(
      value: isChecked,
      onChanged: (value) {
        if (value != isChecked) {
          setState(() {
            isChecked = value;
          });
        }
      },
    );
  }
}

3. Rebuild 제어

Checkbox가 자주 변경되는 경우 Rebuild를 제어할 수 있습니다. shouldRebuild 콜백을 사용하여 상태가 변경되지 않은 경우 불필요한 렌더링을 방지할 수 있습니다.

class MyCheckbox extends StatefulWidget {
  @override
  _MyCheckboxState createState() => _MyCheckboxState();
}

class _MyCheckboxState extends State<MyCheckbox> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Checkbox(
      value: isChecked,
      onChanged: (value) {
        setState(() {
          isChecked = value;
        });
      },
      shouldRebuild: (previous, next) => previous != next,
    );
  }
}

4. 리스트에서 Checkbox 사용 시 성능 최적화

리스트에 Checkbox를 사용할 때는 성능 저하의 원인이 될 수 있는 위젯 재생성을 방지해야 합니다. 이를 위해 ListView.builder를 사용하여 위젯을 적절히 재사용하도록 처리할 수 있습니다.

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return CheckboxListTile(
      title: Text(items[index]),
      value: isChecked[index],
      onChanged: (value) {
        setState(() {
          isChecked[index] = value;
        });
      },
    );
  },
)

결론

Checkbox는 앱에서 자주 사용되는 요소 중 하나입니다. 이러한 요소를 최적화하여 성능을 향상시킬 수 있습니다. StatefulWidget을 사용하고, 상태를 업데이트할 때 조건문으로 재렌더링을 제어하며, 필요한 경우 위젯 재사용을 고려해야 합니다.

더 자세한 내용은 공식 문서를 참조하시기 바랍니다.