플러터에서 flutter_hooks 패키지 사용 방법과 옵션

 

flutter_hooks 패키지는 Flutter에서 React Hooks와 유사한 기능을 제공하여 상태 관리와 부수 효과를 더 간단하고 직관적으로 처리할 수 있게 해줍니다.

이 블로그에서는 flutter_hooks 패키지를 설치하고 사용하는 방법, 그리고 주요 옵션에 대해 자세히 설명하겠습니다.

1. flutter_hooks 패키지 설치

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

dependencies:
  flutter:
    sdk: flutter
  flutter_hooks: ^0.18.0

그런 다음, 터미널에서 pub get 명령어를 실행하여 패키지를 설치합니다

flutter pub get

2. 기본 사용법

flutter_hooks 패키지를 사용하려면 HookWidget을 사용하여 위젯을 작성해야 합니다. 기본적인 예제를 통해 flutter_hooks의 사용법을 살펴보겠습니다.

2.1. 카운터 예제

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
}

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

    return Scaffold(
      appBar: AppBar(
        title: Text('flutter_hooks Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${counter.value}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.value++,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

위 코드에서 CounterScreen 클래스는 HookWidget을 상속받습니다. useState 훅을 사용하여 상태를 관리하며, 버튼을 눌렀을 때 counter 상태를 증가시킵니다.

3. 주요 훅

3.1 useState

useState는 상태 관리를 위한 훅입니다. 상태 값을 읽고 변경할 수 있습니다.

final counter = useState(0);

3.2 useEffect

useEffect는 부수 효과를 처리하는 훅입니다. 컴포넌트가 마운트, 언마운트될 때, 또는 지정된 상태나 값이 변경될 때 실행됩니다.

useEffect(() {
  print('Counter value changed: ${counter.value}');
  return () {
    print('Cleanup');
  };
}, [counter.value]);

위 코드에서 useEffect는 counter.value가 변경될 때마다 실행됩니다. 콜백 함수는 선택적으로 정리(cleanup) 함수도 반환할 수 있습니다.

3.3 useMemoized

useMemoized는 비싼 계산을 메모이제이션하는 훅입니다. 특정 상태나 값이 변경될 때만 재계산됩니다.

final expensiveValue = useMemoized(() {
  return heavyComputation();
}, [dependency]);

3.4 useStream

useStream은 스트림을 구독하고, 데이터와 상태를 반환하는 훅입니다.

final streamData = useStream(someStream);

3.5 useFuture

useFuture는 비동기 작업의 결과를 처리하는 훅입니다.

final futureData = useFuture(someFuture);

4. 고급 사용법

4.1 커스텀 훅

Flutter에서 커스텀 훅을 만들어 재사용할 수 있습니다. 예를 들어, 타이머 훅을 만들어 봅시다.

import 'package:flutter_hooks/flutter_hooks.dart';

Timer useTimer(Duration duration) {
  final timer = useMemoized(() => Timer(duration, () {}), [duration]);
  return timer;
}

4.2 useReducer

useReducer는 복잡한 상태 관리를 위한 훅입니다. 상태와 디스패치 함수를 반환합니다.

final state = useReducer(reducer, initialState);

5. 예제

5.1 API 데이터 가져오기

다음은 API에서 데이터를 가져와서 화면에 표시하는 예제입니다.

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DataFetchScreen(),
    );
  }
}

class DataFetchScreen extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final future = useMemoized(() => fetchData());
    final snapshot = useFuture(future);

    return Scaffold(
      appBar: AppBar(
        title: Text('Data Fetch Example'),
      ),
      body: Center(
        child: snapshot.connectionState == ConnectionState.waiting
            ? CircularProgressIndicator()
            : Text(snapshot.data ?? 'Error fetching data'),
      ),
    );
  }

  Future<String> fetchData() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
    if (response.statusCode == 200) {
      return jsonDecode(response.body)['title'];
    } else {
      throw Exception('Failed to load data');
    }
  }
}

위 예제에서는 useMemoized와 useFuture를 사용하여 API 데이터를 가져오고 화면에 표시합니다.

결론

flutter_hooks 패키지를 사용하면 Flutter에서 상태 관리와 부수 효과를 더 직관적이고 간결하게 처리할 수 있습니다.

기본 사용법부터 고급 사용법까지 다양한 기능을 활용하여 더 나은 코드를 작성할 수 있습니다.

이 블로그를 통해 flutter_hooks 패키지를 이해하고 활용하여 Flutter 애플리케이션을 더욱 효율적으로 개발해 보세요.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱