Flutter의 Hooks 사용하기 02

Hooks의 몇가지 기능에 대해 자세히 알아보도록 하자

---

useState

Hooks를 사용하면서 가장 많이 사용했던 기능으로, 변수를 생성하고 구독한다. 변수의 상태가 변하게 되면 자동으로 위젯을 다시 빌드해준다. setState() {}를 보다 쉽고 직관적으로 제공해준다.

다음은 간단한 카운트 동작을 하는 기능이다.

class Counter extends HookWidget {

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

    return GestureDetector(
      // automatically triggers a rebuild of the Counter widget
      onTap: () => counter.value++,
      child: Text(counter.value.toString()),
    );
  }
}

useEffect

useState와 비슷한 동작을 하지만 useEffect는 선언된 리스트 변수의 상태가 변할때마다 함수가 실행된다.

useEffect는 다음과 같이 구성 되어 있으며, Funtion()과 List<Object>를 메서드를 필요로 한다. 

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

다음 예제에서는 useEffect를 호출하여 Stream을 구독하고 위젯이 삭제되면 구독을 취소하게 된다. 또한, Stream이 변경되면 이전 구독을 취소하고 새로운 Stream을 구독한다.

Stream stream;
useEffect(() {
    final subscription = stream.listen(print);
    // This will cancel the subscription when the widget is disposed
    // or if the callback is called again.
    return subscription.cancel;
  },
  // when the stream changes, useEffect will call the callback again.
  [stream],
);

useState와 useEffect의 차이점은 useState는 구독하는 변수의 상태가 변화할때 화면을 다시 그리게 된다는 점이고, useEffect는 구독하는 List의 변수들의 상태가 변화할때 함수를 호출하는 것이다.

 

useMemorized

useMemorized의 경우 복잡한 개체의 인스턴스를 캐시할때 사용하며, 다음과 같이 구성되어 있다. useEffect와 마찬가지로 Funtion()과 List<Object>를 메서드를 필요로 한다.

T useMemoized<T>(
  T Function() valueBuilder, [
  List<Object?> keys = const <Object>[],
]) {
  return use(
    _MemoizedHook(
      valueBuilder,
      keys: keys,
    ),
  );
}

첫번째 호출에서 즉시 valueBuilder를 호출하여 그 결과를 메모리에 저장하고, 나중에 HookWidget이 다시 빌드 되면, useMemorized 호출은 valueBuilder를 호출하지 않고 이전에 생성된 인스턴스를 반환하고 함수를 다시 호출하여 새 인스턴스를 생성한다고 되어있다.

 

useEffect와 거의 흡사한 방식으로 동작하는데 useMemorized의 경우 계산된 값을 메모리에 저장하여 재 계산을 방지하는 데 사용된다. 계산 비용이 많이 드는 작업의 결과를 캐싱하여 성능을 최적화 하는데에 있다. 반면 useEffect의 경우 사이드 이펙트를 관리하기 위해 사용되게 된다.

 

useEffect를 ColorofDyas에서 잘 모르고 다른 용도로 사용했던것 같다. 이 글을 정리하면서 다시 확인했고 재대로 사용하기 위해 코드를 수정해야겠다.