Riverpod + Flutter Hooks: 최상의 상태 관리를 위한 툴 조합

1. Flutter Hooks의 간편성

프로젝트를 빌드하기 위한 코드를 작성할때 사용할 수 있는 대표적인 툴이라고 한다면, Flutter Hooks가 있다.

 

Flutter Hooks의 간편한 사용법은 모든 플러터 개발자가 한번쯤은 고민한다는 Stateless와 Stateful의 구분을 한다는 그 사실에서 출발을 한다. 물론 두개를 나누는 방법은 매우 간단하다.

 

• Stateless Widget: 내부 상태를 가지지 않고 불변적인 구성요소를 가지는 경우.
• Stateful Widget: 앱에서 상호 작용이나 사용자의 입력에 응답하여 동적으로 변경되는 경우이며, 예를 들어, 버튼을 누르면 상태가 변경되거나 UI가 업데이트 되는 경우.

결국 어플을 만든다는 것은 Stateless나 StatefulWidget의 사용처를 구분하여 작성한다는 기본적인 사실에서 출발한다. 그러나 생각을 해보면, 큰 규모의 프로젝트를 개발할때, 일일이 StatefulWidget의 재사용을 하고 작성하는 것은 여간 번거운 일이 아니다. 이때 Flutter Hooks가 큰 도움이 된다. Flutter Hooks는 훅을 생성하여 코드를 재사용할 수 있도록 플러터 개발자들을 지원하여, 이를 통해 프로젝트를 신속하게 진행할 수 있다.

 

훅(Hook)이란?

상태관리와 여타 리액티브의 기능을 쉽게 사용할 수록 활용되는 함수이다. Stateless의 상태관리는 직관적으로 그리고 Stateful을 사용하지 않고도 상태관리 등 상태 변화에 능동적으로 대응이 가능하다. 훅은 일반적으로 상태관리를 사용하기 위해 사용되며 대표적인 관리 조건은 다음과 같다.

• useState: 상태 생성 및 관리와 상태 변경시 자동 위젯 렌더링 설정
• useEffect: 특정조건에 따른 효과 발생 및 특정작업 수행

즉 상태관리와 생명주기의 메서드의 복잡성을 줄여주며 코드이 가독성을 높이는 유용한 패키지이다.

 

훅은 코드의 양을 줄이는 것도 가능하다. Flutter Hooks를 사용하면 위젯의 모든 상태를 동일한 성능으로 한 클래스 내에서 처리할 수 있다. 이렇게 One single class면 된다.

class Example extends HookWidget {
  ...
}

AnimationController나 TextEditingController와 같은 여러 컨트롤러를 StatefulWidget에서 사용해야 할 경우, 초기화, 해제, didUpdateWidget 등의 모든 라이프사이클을 처리해야 하며, 상태 클래스에 TickerProviderStateMixin을 추가해야 한다. Flutter Hooks에서는 컨트롤러의 라이프사이클을 처리하기 위해 단 한 개의 훅을 생성하면 됩니다. 그런 다음 이 훅을 모든 HookWidget에서 재사용할 수 있다. 그래서 이와 같은 코드 구성도 가능하다.

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

그래서 이제 Flutter Hooks를 사용하면 코딩이 가독성이 높아지고큰 프로젝트에서 유용하다는 사실을 알게 되었다. 위젯 수가 10개 미만일 경우 굳이 사용은 하지 않겠지만, 큰 프로젝트의 경우 매우 유용하다.

 

 

2. Hooks Riverpod

상태 관리의 간단한 중요성은 앱 전체 또는 여러 위젯에서 하나 이상의 변수를 공유하고, 해당 변수의 변경이 위젯들의 재구성을 트리거해야 한다는 것이다. 조금 더 쉽게 말하자면, 앱 전체나 여러 위젯에서 하나 이상의 값이 공유가 되어, 값이 변경이 될 시에 위젯들이 다시 만들어지는 그러한 순환이 계속적으로 반복이 될 수 있도록 만들어야한다는 것이다.

전역 변수(프로그램 전체에 접근할 수 있는 변수)를 생성하고 변경해도, 해당 변수를 감시하고 있는 위젯은 재구성되지 않는다. 이 문제를 해결하기 위해 riverpod는 전역 프로바이더를 생성할 수 있는 기능을 제공한다. 프로바이더는 주로 변수를 담지만, 스트림, 퓨처, ChangeNotifier 등을 담을 수도 있습니다. 이 내용에 대해서 조금 더 알고 싶다면 다음의 포스트를 참조하자.

https://riris01.tistory.com/7

5. Riverpod과 Provider

 프로바이더는 앱의 모든 위젯에서 손쉽게 접근할 수 있으며, 사용하는 방법은 `MyApp()` 위젯을 `ProviderScope`로 감싸기만 하면 된다. 예를 들자면 다음과 같다.

import ...

final helloWorldProvider = Provider((_) => 'Hello world');

void main() {
	runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

hooks_riverpod의 새로운 버전에는 HookConsumerWidget이라는 새로운 위젯이 추가되었다. HookConsumerWidget은 빌드에 다른 매개변수를 가지는데, WidgetRef(줄여서 ref라고도 함)는 프로바이더를 읽고 감시할 수 있도록 해준다.

import ...

class MyApp extends HookConsumerWidget{
 @override
 Widget build(BuildContext context, WidgetRef ref){
   final String value = ref.watch(hellowWorldProvider):
   
   return MaterialApp(
   home: Scaffold(
     appBar: AppBar(title: const Text('Example')),
     body: TextButton(
       onPressed: (){
       final currentValue = ref.read(helloWorldProvider);
       },
       child: Text(value),
       ),
      ),
     );
    }
   }

프로바이더 읽기 (read): 값에 대해 한 번만 읽으며, 값이 변경되어도 재구성이 일어나지 않습니다.
프로바이더 감시 (watch): 값의 변경마다 해당 프로바이더를 감시하고 있는 위젯이 재구성됩니다.

 

rivderpod에서는 read보다는 watch를 통해서 코드를 작성하기를 요청한다. 그 이유는 watch를 사용하여 상태를 감시할시 상태 변화를 즉시 감시하고 업데이트를 할 수 있어, 효과적인 상태 관리를 할 수 있기 때문이다.

이렇게 간단하게 flutter_hooks와 hooks_riverpod를 설정할 수 있다. 더 복잡한 개념과 다양한 방법도 있지만, 대부분의 앱에서는 이러한 개념만 사용할 것이다.

riverpod에 대한 자세한 내용은 여기에서 확인할 수 있다: https://riverpod.dev/docs/getting_started.

 

flutter 개발자로서 작업을 효율적을 높이기 위한 상태관리 패키지로 flutter_hooks와 hooks_riverpod를 사용해 보시길 권장한다. 간단하고 쉽게 구현할 수 있으며, 작업 효율을 향상시킬 수 있다.

 

참고

https://omasuaku.medium.com/riverpod-flutter-hooks-the-best-duo-for-state-management-9429728d632b

Riverpod + Flutter Hooks: The Best Duo for State Management

https://wurikiji.notion.site/Flutter-Hooks-5c94d91f5b594ce09d0b84b9070fdecf

Flutter Hooks