[flutter] 플러터 Riverpod에서의 주요 훅(Hook) 소개

30 Nov 2023

flutter

플러터에서 상태 관리를 효과적으로 처리하기 위해 Riverpod라는 라이브러리를 사용할 수 있습니다. Riverpod는 프로바이더 패턴을 기반으로 한 상태 관리 라이브러리로, 플러터 앱에서 사용하기 쉽고 간편한 방식으로 상태를 관리할 수 있습니다. Riverpod에는 다양한 훅(Hook)이 있으며, 이들을 적절하게 활용하면 보다 쉽고 효율적인 상태 관리를 할 수 있습니다.

1. useProvider

useProvider는 특정 프로바이더를 사용하여 상태를 구독하는 훅입니다. 이 훅을 사용하면 특정 프로바이더에 의존하는 위젯을 구독하고 상태를 업데이트할 수 있습니다. 예를 들어, 아래는 counterProvider라는 프로바이더를 사용하여 상태를 구독하는 예입니다.

// 프로바이더 정의
final counterProvider = Provider<int>((ref) => 0);

// 상태를 사용하는 위젯
class CounterWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final counter = useProvider(counterProvider);
    
    return Text('Count: $counter');
  }
}

2. useStateProvider

useStateProvider는 간단한 상태를 저장하고 업데이트하는 훅입니다. 이 훅은 내부 상태를 관리하며, 변경될 때마다 위젯을 다시 랜더링합니다. 예를 들어, 아래는 버튼을 클릭할 때마다 카운터를 증가시키는 예입니다.

class CounterWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final counter = useStateProvider(0);

    return Column(
      children: [
        Text('Count: $counter'),
        ElevatedButton(
          onPressed: () => counter.value++,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

3. useEffectProvider

useEffectProvider는 특정 종속성에서 동작하는 훅입니다. 이 훅은 다양한 효과를 가지며, 특정 상태 변화에 따라 동작을 실행할 수 있습니다. 예를 들어, 아래는 앱 시작 시에만 한 번 실행되는 효과를 추가하는 예입니다.

class MyWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    useEffectProvider(() {
      print('Widget is created');
      return null; // Clean-up 역할이 필요한 경우에 사용될 수 있습니다.
    }, []);

    return Container();
  }
}

플러터 Riverpod의 주요 훅을 소개했습니다. 이 훅들을 적절하게 활용하면 플러터 앱의 상태 관리를 더욱 편리하고 효율적으로 할 수 있습니다. 자세한 내용은 공식 문서를 참조하십시오.