Flutter Hooks 너란 놈은 뭐냐?! flutter_hooks 파헤쳐보기 - useState/useEffect 사용법 (1)

 

작년부터 진행하던 모임에서 매주마다 새로운 패키지에 대해서 각자 공부해서 배운점을 공유하는 시간을 가져보기로 했다.

이번에는 flutter_hooks에 대해 알아보자고 진행이 되었고 내가 공부한 내용을 정리해보자고 한다.

 

hooks에 대한 내용에 대한 참고는 아래와 같다.

pub.dev 공식
https://pub.dev/packages/flutter_hooks

flutter_hooks | Flutter package

개발하는남자님 유튜브
https://www.youtube.com/watch?v=GBVBLKESogU&list=PLgRxBCVPaZ_32XE17iRqS0y6cq3tQii48

 

---

그렇다면 hooks이란 무엇일까?

일단 hook이란 갈고리란 뜻이다. 찾아보기 이 개념은 React에서부터 처음 나온 것 같다.

일단 프로그래밍언어에서 훅이란 '원래 존재하는 어떤 기능에 갈고리를 거는 것처럼 끼어들어가 같이 수행' 하는 의미라고 한다.

그렇다면 결국 훅 패키지는 dart코드를 개발자가 간결하고 쉽게 만들게 도와주는 보조역활 수단이라 생각하면 될 것 같다.

 

실제 훅 개발자들의 공식문서를 살펴보면

'중복을 제거하고 위젯간의 코드 생산성을 증가시키기 위함이다.' 라고 적혀있다.

즉 보일러플레이트 코드(Boiler Plate code)를 최대한 줄이기 위해 이 패키지를 만들었다고 이해하면 좋을 것 같다.

 

실제 코드를 보면서 훅의 유용함을 보자!

class Example extends StatefulWidget {
  final Duration duration;

  const Example({Key? key, required this.duration})
      : super(key: key);

  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> with SingleTickerProviderStateMixin {
  AnimationController? _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: widget.duration);
  }

  @override
  void didUpdateWidget(Example oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.duration != oldWidget.duration) {
      _controller!.duration = widget.duration;
    }
  }

  @override
  void dispose() {
    _controller!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

위 코드는 플러터에서 애니메이션을 구현하기 위한 간단한 예제이다.

애니메이션을 구현하기 위해서는 

initState(){} // 초기 설정
didUpdateWidget(){} // 업데이트 설정
dispose(){} // 메모리에서 제거

이렇게 3개의 구성요소를 구현하여 생명주기(LifeCycle)을 생각하면서 구현해야 된다.

개발을 하면서 사실 생명주기를 신경쓰지 않고(예를들어 컨트롤러를 할당하고 dispose()를 하지 않고 다른 화면으로 전환한다던가 등)

이렇게 개발을 했는데 작은 규모의 프로젝트라면 괜찮을지 몰라서 큰 규모라면 분명히 메모리에 쓸모없는 낭비가 있을 것이고 좋은 코드라 볼 수는 없을 것이다.

 

class Example extends HookWidget {
  const Example({Key? key, required this.duration})
      : super(key: key);

  final Duration duration;

  @override
  Widget build(BuildContext context) {
    final controller = useAnimationController(duration: duration);
    return Container();
  }
}

하지만 위와같이 훅을 쓴다면 짧은 코드로도 똑같은 성능을 낼 수 있다.

실제 위 두 코드는 100% 똑같은 동작방식으로 실행된다.

그렇다면 다른 로직들은 어디에 있는것인가? 라고 생각이 들 수 있다.

 

이는 훅에 다 구현이 되어있기에 우리는 구현된 기능들만 가져다가 쓰면 된다.

 

이제 어떤 기능들이 있는지 간단하게 알아보자.

 

No.	Name	Description
1	useState	변수를 생성하고 구독합니다.
2	useEffect	상태를 업데이트하거나 선택적으로 취소하기에 유용합니다.
3	useMemoized	다양한 객체의 인스턴스를 캐싱합니다.
4	useStream	Stream을 구독합니다. AsyncSnapShot으로 현재상태를 반환합니다.
5	useFuture	Future를 구독합니다. AsyncSnapShot으로 상태를 반환합니다.
6	useAnimation	Animation을 구독합니다. 해당 객체의 value를 반환합니다.
7	useReducer	state가 조금 더 복잡할때, useState 대신 사용할 대안입니다.
8	useTextEditingController	TextEditingController를 생성합니다.
9	useTabController	TabController를 생성합니다.
10	useScrollController	ScrollController를 생성합니다.
11	usePageController	ScrollController를 생성합니다.

 

---

1. useState

위 코드는 변수를 생성하고 구독을 한다고 적혀있다.

이는 간단하게 Getx에 .obs라고 생각하면 편할 것 같다.

즉 내가 변수를 선언하고 그 변수의 상태가 변하게 된다면 자동으로 재빌드를 해준다고 생각하면 된다.

즉, 자동으로 setState(){}를 해주는 역활이라고 생각하면 될 것 같다.

class HomeScreen extends HookWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final counter = useState(0);

    return Scaffold(
      appBar: AppBar(
        title: const Text('useState'),
      ),
      body: Center(
        child: Text(
          counter.value.toString(),
          style: const TextStyle(
            fontSize: 32,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.value++,
        child: const Icon(Icons.add),
      ),
    );
  }
}

 

위 코드를 보면 counter변수에 useState(0)를 할당해 주고 있다.

이렇게 된다면 0이라는 int형을 자동으로 타입을 지정해서 이제부터 변수의 상태를 구독하게 되므로 변경사항이 있을때마다

Rebuild를 하여 화면에 상태를 새롭게 반영하게 된다.

그렇다면 나는 궁금증이 하나 생겼다. Provider처럼 화면을 전부 갱신하는 것이 아니라 변수 부분만 갱신하는 것인가?

그래서 log를 찍어보기로 했다.

결론은 화면을 전부 재빌드하게 된다.

 

아니 그렇다면 그냥 Stateful 위젯에 setState를 쓰지 귀찮게 패키지 설치하고 이거 공부해야 함?

라고 생각이 들 수 있다. 맞다 훅은 그냥 도움을 주는 패키지라 결국 개인이 선택하기 나름이다.

그렇다면 훅없이 사용해본 Stateful로만 위 코드를 다시 작성해보자.

좌 flutter_hooks / 우 StatefulWidget

두 코드의 양차이로 봤을때는 hooks 패키지를 사용한게 더 짧고 가독성 측면에서도 좋은 것 같다.

근데 결국 개발자 본인이 편한쪽으로 선택하는게 좋다. 이게 더 좋다라고 딱 잘라 말할수는 없다.

잘생각해보고 업무효율이 증가한다고 생각드는 쪽으로 선택하는게 옳은 선택이라고 생각한다.

 

전체 코드

코드 보기

import 'dart:developer';

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

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    ),
  );
}

class HomeScreen extends HookWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final counter = useState(0);
    log('Rebuild');

    return Scaffold(
      appBar: AppBar(
        title: const Text('useState'),
      ),
      body: Center(
        child: Text(
          counter.value.toString(),
          style: const TextStyle(
            fontSize: 32,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.value++,
        child: const Icon(Icons.add),
      ),
    );
  }
}


// class HomeScreen extends StatefulWidget {
//   const HomeScreen({super.key});

//   @override
//   State<HomeScreen> createState() => _HomeScreenState();
// }

// class _HomeScreenState extends State<HomeScreen> {
//   int counter = 0;

//   @override
//   Widget build(BuildContext context) {
//     log('Rebuild');

//     return Scaffold(
//       appBar: AppBar(
//         title: const Text('useState'),
//       ),
//       body: Center(
//         child: Text(
//           counter.toString(),
//           style: const TextStyle(
//             fontSize: 32,
//             fontWeight: FontWeight.bold,
//           ),
//         ),
//       ),
//       floatingActionButton: FloatingActionButton(
//         onPressed: () => setState(() {
//           counter++;
//         }),
//         child: const Icon(Icons.add),
//       ),
//     );
//   }
// }

---

2. useEffect

다음으로는 useEffect의 사용법이다.

useState와 useEffect 두개의 차이점은

useEffect는 선언된 리스트변수의 상태가 변할때마다 함수가 실행된다는 점에서 차이가 있다.

글로만 보면 전혀 이해가 안되는게 당연하니 코드와 예제를 보면서 쉽게 이해해 보자!

 

일단 useEffect가 받아야하는 메서드를 확인해보자!

void useEffect(Dispose? Function() effect, [List<Object?>? keys]) {
  use(_EffectHook(effect, keys));
}

(Function(), List<Object>) 이렇게 2개의 메서드가 필요하다.

즉, 처음에는 함수의 값이 필요하고 그 다음으로 리스트가 주어져야 한다.

class HomeScreen extends HookWidget {
  HomeScreen({super.key});
  int increment = 0;

  @override
  Widget build(BuildContext context) {
    final counter = useState(0);
    
    // useEffect 코드
    useEffect(() {
      log('useEffect 실행');
      return () {};
    }, [increment]);
    
    ...
    
    Scaffold(..그외 코드);
 }

간단하게 이렇게 생각하면 될 것 같다.

위 코드는 useEffect가 실행이 된다면 log로 'useEffect 실행'이 프린트 되고,

return값으로는 아무것도 주지 않는다. 그리고 2번째 인자롤 increment라는 int형을 리스트 형태로 주었다.

자 그렇다면 어떻게 useEffect()를 사용해야 하는지 전체 코드를 보면서 이해해보자.

 

class HomeScreen extends HookWidget {
  HomeScreen({super.key});
  int increment = 0;

  @override
  Widget build(BuildContext context) {
    final counter = useState(0);
    // useEffect 기능
    useEffect(() {
      log('useEffect 실행');
      return () {};
    }, [increment]);

    log('Rebuild');
    return Scaffold(
      appBar: AppBar(
        title: const Text('useState'),
      ),
      body: Center(
        child: Text(
          counter.value.toString(),
          style: const TextStyle(
            fontSize: 32,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.value++;
          // counter값이 5의 배수일때 increment 1증가
          if (counter.value % 5 == 0) {
            increment++;
          }
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

 

위 코드를 자세히 보면 counter값이 5의 배수일때 increment값을 1씩 증가 시킨다.

이때 increment의 값에 변화가 감지되면 useEffect()가 실행이 되고 그 안에있는 함수가 실행이 된다.

 

위와 같이 처음에 useEffect()가 한번이 실행되고

increment의 값의 상태가 변화하지 않는다면 useEffect가 실행되는 일은 없다.

자 그렇다면 의문이 들 수 있다.

 

아니 그래서 useState랑 useEffect랑 도대체 뭐가 다른건데!?

 

간단하게 설명하자면

useState는 상태가 변화할때마다 전체화면을 전부 재빌드하게 된다.

하지만 useEffect는 List[]안에 있는 변수들의 키값이 변할때마다 상태를 감지하여 함수가 실행된다.

사용법이 맞는 방식인지는 모르겠지만 이렇게 사용할 수 도 있을 것 같다.

 

내가 이해한 내용을 그대로 옮겨 적었는데 조금이나마 이해가 되었으면 좋겠다.

혹시 추가로 궁금한 점이 있다면 댓글로 남겨주기 바란다.

자세한 내용은 밑에 풀코드를 실행해보면서 이해하면 더욱 좋을 것 같다.

 

https://dartpad.dev/?id=7face35a3c5eb5f24c66a92646754199

DartPad

 

전체 코드

코드 보기

import 'dart:developer';

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

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    ),
  );
}

// ignore: must_be_immutable
class HomeScreen extends HookWidget {
  HomeScreen({super.key});
  int increment = 0;
  int increment1 = 0;

  @override
  Widget build(BuildContext context) {
    final counter = useState(0);
    // useEffect 기능
    useEffect(() {
      log('useEffect 실행');
      return () {
        increment1++;
      };
    }, [increment]);

    log('Rebuild');
    return Scaffold(
      appBar: AppBar(
        title: const Text('useState'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              counter.value.toString(),
              style: const TextStyle(
                fontSize: 32,
                fontWeight: FontWeight.bold,
              ),
            ),
            Text(
              increment1.toString(),
              style: const TextStyle(
                fontSize: 32,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.value++;
          // counter값이 5의 배수일때 increment 1증가
          if (counter.value % 5 == 0) {
            increment++;
          }
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}