[flutter] useReducer 훅 위젯의 사용법과 예제
이번 포스트에서는 Flutter에서 useReducer 훅을 사용하는 방법과 예제에 대해 알아보겠습니다.
useReducer란?
useReducer는 Flutter에 있는 훅 중 하나로, 상태 관리를 위해 사용됩니다. 이를 통해 상태와 리듀서 함수를 활용하여 상태를 업데이트할 수 있습니다.
사용법
useReducer 훅을 사용하려면, 먼저 flutter_hooks 패키지를 설치해야 합니다. 이를 통해 useReducer를 Flutter 프로젝트에서 사용할 수 있게 됩니다.
예제 코드
아래는 간단한 카운터 앱을 만들며 useReducer를 사용하는 예제 코드입니다.
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 initialState = 0;
final reducer = (int state, String action) {
if (action == 'increment') {
return state + 1;
}
return state;
};
final List<Object> args = ['increment'];
final counter = useReducer(reducer, initialState, initialAction: args);
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('useReducer Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Counter:',
),
Text(
'${counter.state}',
style: Theme.of(context).textTheme.headline4,
),
ElevatedButton(
onPressed: () => counter.dispatch('increment'),
child: Text('Increment'),
),
],
),
),
),
);
}
}
위 코드에서, useReducer를 선언하여 리듀서 함수와 초기 상태를 통해 counter를 생성합니다. 그리고 이 counter를 통해 state를 읽고 dispatch를 호출하여 상태를 변경합니다.
위의 예제 코드를 실행하면, Increment 버튼을 누를 때마다 카운터의 값이 증가하는 간단한 앱이 생성될 것입니다.
마치며
이 포스트에서는 Flutter에서 useReducer 훅을 사용하는 방법과 예제에 대해 알아보았습니다. useReducer를 사용하면 복잡한 상태 관리를 보다 간단하게 할 수 있으며, 리듀서 함수를 활용하여 효율적으로 상태를 업데이트할 수 있습니다. useReducer를 사용하여 Flutter 애플리케이션을 개발할 때 참고하시기 바랍니다.
더 많은 정보를 원하시면 flutter_hooks 패키지 페이지를 방문해보시기 바랍니다.