[flutter] 플러터 훅 위젯과 다른 UI 렌더링 방법 비교

21 Dec 2023

flutter

플러터에서 UI를 렌더링할 때 기존의 위젯과 Hooks 위젯 사이에는 어떤 차이가 있는지 알아보겠습니다.

1. 기존 위젯

기존의 위젯은 StatefulWidget을 상속하여 UI 상태를 관리합니다. StatefulWidget은 상태 변화에 따라 UI를 다시 렌더링할 수 있도록 도와줍니다. 그러나 StatefulWidget을 사용하면 상태와 효과적으로 데이터를 관리하기 위해 많은 코드를 작성해야 합니다.

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MyWidget'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Incremented value:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

2. Hooks 위젯

반면, Hooks를 사용하면 상태 관리와 UI 렌더링을 보다 간결하게 처리할 수 있습니다. Hooks는 함수형 위젯 내에서 상태를 관리하고 상태 변화에 따라 UI를 업데이트합니다.

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class MyHookWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final counter = useState(0);

    return Scaffold(
      appBar: AppBar(
        title: Text('MyHookWidget'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Incremented value:',
            ),
            Text(
              '${counter.value}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.value++;
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

결론

기존의 StatefulWidget을 사용하는 방식과 Hooks를 사용하는 방식은 각각 장단점이 있습니다. StatefulWidget을 사용하면 상태 관리와 UI 렌더링을 명확히 구분하여 작업할 수 있지만, Hooks를 사용하면 효율적으로 상태를 관리하고 UI를 렌더링할 수 있습니다.

따라서 프로젝트의 특성과 개발자의 선호도에 따라 적절한 방식을 선택할 수 있습니다.

자세한 내용은 플러터 공식 문서를 참고하시기 바랍니다.