[flutter] 플러터에서 useReducer 훅(hook)을 이용한 상태 관리 예제

14 Dec 2023

flutter

플러터(Flutter)에서 useReducer 훅을 이용하여 상태를 관리하는 방법을 알아보겠습니다. useReducer 훅은 React에서 영감을 받은 Flutter Hooks 라이브러리에 포함된 기능으로, 앱의 상태를 관리하는데 유용합니다.

필요한 패키지 설치

먼저, Flutter Hooks 라이브러리를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다.

dependencies:
  flutter_hooks: ^0.18.0

그리고 터미널에서 아래 명령을 실행하여 패키지를 설치합니다.

flutter pub get

useReducer 훅 사용하기

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

// 액션 정의
enum CounterAction { increment, decrement }

// reducer 함수
int counterReducer(int state, CounterAction action) {
  switch (action) {
    case CounterAction.increment:
      return state + 1;
    case CounterAction.decrement:
      return state - 1;
    default:
      return state;
  }
}

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

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    // useReducer 훅을 이용하여 상태 및 디스패치 함수 가져오기
    final counterState = useReducer(counterReducer, initialState: 0);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('useReducer 훅 예제')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('카운터 값: ${counterState.value}'),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  ElevatedButton(
                    onPressed: () => counterState.dispatch(CounterAction.increment),
                    child: Text('증가'),
                  ),
                  ElevatedButton(
                    onPressed: () => counterState.dispatch(CounterAction.decrement),
                    child: Text('감소'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 예제에서는 useReducer 훅을 사용하여 간단한 카운터 앱을 구현했습니다. CounterAction은 증가와 감소라는 두 가지 액션을 정의하고, counterReducer 함수는 현재 상태와 액션을 받아 새로운 상태를 반환합니다.

결론

useReducer 훅을 이용하면 복잡한 상태 관리 로직을 간소화하고, 가독성과 유지보수성을 높일 수 있습니다. 리액트와 비슷한 방식으로 상태를 관리할 수 있어서, 리액트 개발자들에게 친숙하고 익숙한 방법으로 플러터 앱을 개발할 수 있습니다.

플러터에서 useReducer를 사용하여 상태를 관리하는 방법을 익히고, 실제 프로젝트에 적용해보시기를 권장합니다.