[034] 플러터 (Flutter) 배우기 - 상태 관리4 (riverpod 사용)

안녕하세요~ totally 개발자입니다.

 

riverpod

 

오늘 이 시간에는 river_pod를 사용하여 상태를 관리하는 방법에 대해 간단하게 살펴보도록 하겠습니다. Riverpod도 역시 상태 관리 라이브러리로서, Provider와 사용성이 같고 Provider의 문제점을 개선한 버전이라고 보시면 됩니다. 여기에서는 flutter_riverpod 라이브러리로 진행하도록 하겠습니다. 기본적으로 Provider에 대한 이해가 필요한데, 일반적인 Provider는 값을 읽을 수는 있으나 수정할 수는 없습니다. 값을 읽고 수정하려면 상태를 변경할 수 있는 Provider인 StateProvider를 사용해야 하며, 일부 로직을 같이 사용하는 경우에는 StateNotifierProvider를 사용하시면 됩니다.

 

Step 1: pubspec.yaml 파일에 flutter_riverpod를 명시해주고 flutter pub get해줍니다.

 

 

 

Step 2: main.dart 안에 runApp 함수 쪽에 ProviderScope로 MyApp를 감싸줍니다. 2번째 줄 flutter_riverpod 해주셔야 합니다.

 

 

 

Step 3: MyApp 부분이며 여기에서는 특별한 것은 없습니다.

 

 

 

Step 4: 중요한 HomeView 클래스이며 ConsumerWidget를 extends하게 됩니다. 19번째 StateNotifierProvider를 활용해서 변수를 선언해줍니다. 22번째 줄에 WidgetRef ref를 통해 상태를 watch, read, listen할 수 있으며 23번째에서는 count 값을 ref.watch(counterProvider)를 통해 가져옵니다. 25-30번째 줄은 log를 보기 위해 작성한 것으로 정말로 상태가 업데이트된 경우에 listen를 통해 검증하고 원하는 로직을 실행할 수 있습니다. 주의할 것은 counterProvider 다음 (prev, next)로 명시한 부분이 있는데 2개의 파라미터가 들어가며 쉽게 말해 반영되기 이전 값, 반영된 값이라고 보시면 됩니다. 

 

 

 

Step 5: Scaffold 위젯을 만들어주었고 37번째에 count 변수를 보여주는 텍스트 위젯, 41번째에 버튼을 눌렀을 때, ref.watch(counterProvider.notifier).increment() 함수를 통해 count 값을 증가시킬 수 있습니다. 

 

 

Step 6: Counter 클래스는 다음처럼 명시하시면 됩니다.

 

 

Step 7: 결과는 아래와 같습니다. 아래 DEBUG CONSOLE에 상태 반영에 각각 0, 1 / 1, 2 / 2, 3으로 되어 있는 것을 확인할 수 있습니다.

 

 

[전체 소스 코드]

 

 

 

References

 

https://pub.dev/packages/riverpod

riverpod | Dart Package

 

[유튜브 강좌 영상]

 

https://youtu.be/X8NZidrj8ys