[flutter] useEffect 훅 위젯의 사용법과 예제

21 Dec 2023

flutter

Flutter 2.0 이후부터는 useEffect 훅을 이용하여 상태 변화를 감지하는 방법이 추가되었습니다. 이 포스트에서는 useEffect 훅을 사용하는 방법과 간단한 예제를 통해 실제 구현 방법을 살펴볼 것입니다.

useEffect란?

useEffect는 리액트 훅에 영감을 받아 플러터에서 비동기 작업, 상태 변화, 혹은 특정 이벤트에 대한 반응적인 동작을 정의할 수 있도록 해주는 훅입니다.

사용법

이제 useEffect를 사용하여 상태 변화나 특정 작업에 대한 효과를 정의하는 방법을 살펴보겠습니다.

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: MyHomePage(),
    );
  }
}

class MyHomePage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    useEffect(() {
      // 사용자 정의 효과 코드
      return () {
        // 클린업 로직
      };
    }, const []);
  
    return Scaffold(
      appBar: AppBar(
        title: Text('useEffect Example'),
      ),
      body: Center(
        child: Text(
          'Hello, useEffect!',
        ),
      ),
    );
  }
}

위 예제에서, useEffect를 호출하면서 첫 번째 매개변수로는 효과를 정의하는 콜백 함수를 전달합니다. 이 콜백 함수는 상태 변화를 감지하고 효과를 발생시키는 역할을 합니다. 두 번째 매개변수는 의존성 배열로, 만약 배열에 있는 값 중 하나라도 변경되면 효과를 재실행하는데 사용됩니다.

예제

간단한 예제로 useEffect를 이용하여 어떤 효과를 발생시키는지 살펴보겠습니다.

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: MyHomePage(),
    );
  }
}

class MyHomePage extends HookWidget {

  final ValueNotifier<int> _counter = ValueNotifier<int>(0);

  @override
  Widget build(BuildContext context) {
    useEffect(() {
      final Function listener = () {
        // 특정 상태 변화에 대한 효과 정의
        print('Counter changed: ${_counter.value}');
      };
      _counter.addListener(listener);

      return () {
        // 클린업 로직
        _counter.removeListener(listener);
      };
    }, []);

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

위 예제는 ValueNotifier를 사용하여 특정 값을 변경할 때마다 useEffect를 이용하여 해당 변경을 감지하고 콘솔에 로그를 출력하는 예제입니다.

결론

useEffect를 사용하면 플러터 앱에서 상태의 변화나 특정 작업에 대한 반응적인 동작을 쉽게 정의할 수 있습니다. 이를 통해 앱의 사용자 경험을 향상시키는데 도움이 될 것입니다.

더 많은 정보를 원한다면 flutter_hooks 공식 문서를 참고해보세요!