[flutter] 플러터에서 useValueNotifier 훅(hook)을 사용한 동적인 값 변경

14 Dec 2023

flutter

플러터(Flutter)는 사용자 인터페이스(UI)를 만들기 위한 강력한 프레임워크입니다. useValueNotifier 훅을 사용하여 상태를 관리하고 동적인 값 변경을 쉽게 할 수 있습니다. 이 포스트에서는 useValueNotifier 훅을 활용하여 플러터 앱에서 동적인 값 변경을 어떻게 할 수 있는지 알아보겠습니다.

useValueNotifier 훅이란?

useValueNotifier 훅은 플러터에서 상태를 관리하기 위한 훅(Hook) 중 하나입니다. 이 훅을 사용하면 값이 변경될 때마다 위젯을 다시 그려주는 데 필요한 로직을 쉽게 작성할 수 있습니다. useValueNotifier 훅을 사용하면 상태 변화를 추적하고 UI를 업데이트할 수 있습니다.

useValueNotifier 훅 사용하기

useValueNotifier 훅을 사용하려면 먼저 flutter_hooks 패키지를 프로젝트에 추가해야 합니다. 그런 다음, ValueNotifier 객체를 생성하고 그 값을 변경할 때마다 UI가 갱신되도록 ValueListenableBuilder 위젯을 사용합니다.

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

void main() {
  runApp(MyApp());
}

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

    return Scaffold(
      appBar: AppBar(
        title: Text('ValueNotifier 훅 예제'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('클릭 횟수:'),
            ValueListenableBuilder(
              valueListenable: count,
              builder: (context, value, child) {
                return Text(
                  '$value',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => count.value++,
        tooltip: '증가',
        child: Icon(Icons.add),
      ),
    );
  }
}

이 예제에서는 useState 훅을 사용하여 count 상태를 생성하고, ValueListenableBuilder를 사용하여 count가 변경될 때마다 UI를 다시 그려줍니다.

예제 코드

위의 예제 코드에서 보여준 것처럼, useValueNotifier 훅을 사용하면 값이 변경될 때 UI를 갱신할 수 있는 간단한 방법을 제공합니다.

결론

이 포스트에서는 useValueNotifier 훅을 사용하여 플러터 앱에서 동적인 값 변경을 하는 방법에 대해 알아보았습니다. useValueNotifier 훅은 상태 변화를 추적하고 UI를 갱신하는 데 매우 유용하며, 복잡한 상태 관리 로직을 작성하지 않고도 간단하게 상태를 업데이트할 수 있습니다. 이를 통해 개발자는 더욱 효율적으로 플러터 애플리케이션을 개발할 수 있습니다.

목차

useValueNotifier 훅이란?

useValueNotifier 훅 사용하기

예제 코드

결론