[flutter] 플러터에서 훅(hook)을 이용하여 동적 UI 변경하기

14 Dec 2023

flutter

개요

이번 포스트에서는 플러터(Flutter)에서 훅(Hook)을 이용하여 동적 UI를 변경하는 방법에 대해 알아보겠습니다. 훅은 간편한 상태 관리와 UI 업데이트를 위해 사용됩니다. 이를 통해 코드를 더욱 간결하게 작성하고, 효율적으로 상태를 관리할 수 있습니다.

훅(Hook)이란?

훅은 리액트(React)에서 시작된 개념으로, 플러터에서도 사용할 수 있습니다. 훅은 함수 컴포넌트에서 상태 관리와 다른 리액트 기능들을 사용할 수 있도록 해줍니다. 플러터에서는 flutter_hooks 패키지를 이용하여 훅을 사용할 수 있습니다.

동적 UI 변경을 위한 훅 사용하기

다음은 간단한 예제를 통해 플러터에서 훅을 사용하여 동적 UI를 변경하는 방법을 알아보겠습니다.

우선, flutter_hooks 패키지를 프로젝트에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_hooks: ^0.17.0

다음으로, 훅을 사용하여 동적으로 변경할 값을 관리합니다.

import 'package:flutter_hooks/flutter_hooks.dart';

// 훅을 사용하여 동적으로 변경할 값을 관리
final counter = useState(0);

마지막으로, UI에서 해당 값을 표시하고, 버튼을 통해 값을 변경할 수 있도록 합니다.

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 = useValueListenable(counter);
  
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('훅을 이용한 동적 UI 변경'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                '버튼을 눌러 값을 변경하세요:',
              ),
              Text(
                '$count',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // 값 변경
            counter.value++;
          },
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

위의 예제에서는 useState 훅을 사용하여 카운터 값을 변경하고, 그 값을 UI에 반영하는 방법을 보여주었습니다. 훅을 이용하면 상태 관리가 간편해지고, 코드가 더욱 간결해집니다.

마무리

이렇게 플러터에서 훅을 사용하여 동적 UI를 변경하는 방법에 대해 알아보았습니다. 훅을 이용하면 상태 관리와 UI 업데이트가 보다 간편해지므로, 플러터 앱의 개발과 유지보수가 편리해질 수 있습니다.

더 많은 정보와 예제는 flutter_hooks GitHub 페이지에서 확인할 수 있습니다.