flutter_hooks - 실무에서 유용한 패키지 Flutter package 소개

Flutter : 유용한 패키지 소개

Flutter로 개발을 하다 보면 반복적으로 작성해야만 하는 코드들이 존재합니다. 이러한 코드들은 매번 작성하기 귀찮고, 전체 코드의 모습을 복잡해 보이게 만듭니다. 하지만 이러한 코드들을 작성하지 않으면 앱 자체에 문제를 야기할 수 있습니다. 예를 들어 아래와 같은 것들입니다.

• Controller의 선언, 생성, 해제
• 상태 변화를 위한 혹은 rebuild를 시키기 위한 setState
• build 메서드 내에서 한 번만 실행되기를 원하는 코드 뭉치를 위한 예외처리

이러한 상황에서 유용하게 쓰일 수 있는 패키지가 바로 flutter_hooks입니다.

flutter_hooks | Flutter Package

flutter_hooks란?

flutter_hooks는 javascript 프레임워크인 React에서 사용되는 hooks를 Flutter 상에서 구현한 것입니다. flutter_hooks는 위젯의 라이프사이클을 관리해 주고 중복되는 코드를 줄여주는 역할을 합니다.

사용법

hooks에서는 useEffect, useState, useAnimationController와 같은 여러 가지 hook들을 지원합니다.

useAnimtaionController

그중 useAnimationController의 사용법을 살펴보겠습니다. 기존 hooks를 사용하지 않는 코드에서는 하나의 AnimationController를 사용하기 위해 아래와 같은 반복적인 코드를 사용해야 했습니다.

• Controller의 선언
• Controller 생성
• Controller 해제

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

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

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

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

이를 hooks를 사용하는 코드로 바꾸면 아래와 같이 단순화됩니다.

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

animationController를 단지 useAnimationController를 사용하여 생성하기만 하면 HookWidget 내부적으로  Controller의 생성과 해제 등 라이프 사이클을 관리해 주기 때문에 별도의 처리 코드가 필요 없습니다.

useEffect

useEffect는 기본적으로 위젯의 build가 호출될 때마다 첫 번째 인자(effect)로 넘긴 함수의 내용을 실행해 주는 역할을 합니다(두 번째 인자에 값을 넘기지 않았을 경우). 두 번째 인자로는 Object의 List를 받는데, 리스트를 넘기면 해당 리스트에 포함된 값들이 변경될 경우에만 effect가 실행됩니다. 즉, 모든 build의 호출마다 effect를 실행하지 않고 특정 변수의 값이 변경될 때만 실행합니다.(한 번만 호출되도록 하고 싶다면 두 번째 인자에 빈 배열을 넘겨주면 됩니다!) 추가적으로 dispose 라이프 사이클 타이밍에 실행되어야 하는 내용을 아래와 같이 hooks에 전달할 수 있습니다.

* 이와 같은 방식을 tear-off라고 합니다!

참고 : https://www.youtube.com/watch?v=OmCaloD7sis (tear-off)

// 타이머를 생성하고 dispose 타이밍에 타이머를 해제해야 하는 경우
useEffect(() {
      timer = Timer.periodic(Duration(seconds: 1), (timer) {
        DateTime currentTime = DateTime.now();
        DateTime endTime = timeParser(end);
        Duration diff = endTime.difference(currentTime);

        remainTime.value = CustomRemainTime(diff);
      });

      return () {
        timer.cancel();
      };
    });

이 외에도 다양한 hook들을 지원하고, 자주 사용되는 코드 패턴을 custom hook의 형태로 만들 수도 있어 아주 유용한 패키지라고 할 수 있습니다.