0. Riverpod๋?
Flutter์์ ์ฌ์ฉํ๋ ์ํ ๊ด๋ฆฌ๋ฅผ ์ฝ๊ฒ ๊ด๋ฆฌํ ์ ์๋๋ก ํ๋ ํ๋ ์์ํฌ ์ค ํ๋์ด๋ค.
์ํ ๊ด๋ฆฌ๋ฅผ ์ํด ์ฌ์ฉํ๋ ์ฃผ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ Provider์ ํ๊ณ๋ฅผ ๊ฐ์ ํ ๊ธฐ๋ฅ์ ์ ๊ณตํ๊ธฐ ์ํ ๋ชฉ์ ์ผ๋ก ๊ฐ๋ฐ๋์๋ค.
๊ณต์ ํํ์ด์ง์์๋ ๋ฆฌ์กํฐ๋ธ ์บ์ฑ, ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ ํ๋ ์์ํฌ๋ผ๊ณ ์๊ฐ๋์ด ์๋๋ฐ ๋ฆฌ์กํฐ๋ธ ์บ์ฑ๊ณผ ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ์ ๋ฌด์์ผ๊น?
- ๋ฆฌ์กํฐ๋ธ ์บ์ฑ
- ๋ฐ์ดํฐ๋ฅผ ๋น๋๊ธฐ์ ์ผ๋ก ๊ณ์ฐํ ๋ ์บ์ฑํ์ฌ ํด๋น ๋ฐ์ดํฐ๊ฐ ํ์ํ ๋ชจ๋ ๊ณณ์ ์ฝ๊ฒ ์ ๊ทผํ ์ ์๋๋ก ํ๋ ๊ธฐ์
- ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ
- UI์ ๋ฐ์ดํฐ๋ฅผ ๊ฒฐํฉํ๋ ๊ธฐ์
- ๋ฐ์ดํฐ์ ๋ณ๊ฒฝ์ ๋ฐ๋ผ UI๋ฅผ ์๋์ผ๋ก ๋ณ๊ฒฝ
- MVVM ํจํด ๊ตฌํ ๊ฐ๋ฅ
1. Riverpod์ ํน์ง
- ์ฌ์ด ์ ์ญ ์ํ ๊ด๋ฆฌ ๊ตฌํ
- ์ํ๋ฅผ ์ ์ญ์ ์ผ๋ก ์ฌ์ฉ ๊ฐ๋ฅํ๋ฉฐ ํ์ํ ๊ฒฝ์ฐ์๋ง ์ด๊ธฐํ
- ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ๊ฐ ์๋์ ์ผ๋ก ์ด๋ฃจ์ด์ง - ์์กด์ฑ ์ฃผ์
- ์ข ์์ฑ์ ๋ช ํํ๊ฒ ๊ด๋ฆฌ ๊ฐ๋ฅ - Auto Dispose
- ํ์ํ์ง ์์ Provider๋ค ์๋ ์ ๊ฑฐ - ํ
์คํธ ์ฉ์ด์ฑ
- ์ํ ๊ด๋ฆฌ ๋ก์ง๊ณผ UI ๋ก์ง ๋ถ๋ฆฌ๋ก ํ ์คํธ ์์ฑ์ ์ฉ์ด - ์ ์ฐ์ฑ
- ๋ค์ํ ์ํ ๊ด๋ฆฌ ํจํด ์ง์
2. Provider์ ์ข ๋ฅ
- Provider
- Rivderpod์ ๊ธฐ๋ณธ ์์๋ก ๋ฐ์ดํฐ ์ ๊ณต ๋ฐ ์ํ ๊ด๋ฆฌ๋ฅผ ํจ
- ์ข ์์ฑ ์ฃผ์ ์ญํ
- StateProvider
- ๋จ์ํ ์ํ๋ฅผ ๊ด๋ฆฌ
- FutureProvider
- ๋น๋๊ธฐ ์์ ์ ๊ด๋ฆฌ
- Future ๊ฐ์ฒด๋ฅผ ๋ฐํ
- API ํธ์ถ์ด๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ฟผ๋ฆฌ์ ๊ฐ์ ๋น๋๊ธฐ ์์ ์ ์ฌ์ฉ
- StreamProvider
- ์คํธ๋ฆผ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌ
- ๋ฐ์ดํฐ๋ฅผ ์ค์๊ฐ์ผ๋ก ์ ๋ฐ์ดํธํ ๊ฒฝ์ฐ ์ฌ์ฉ
- StateNotifierProvider
- ์ํ ๋ณํ๊ฐ ๋ณต์กํ ๊ฒฝ์ฐ ์ฌ์ฉ
- StateNotifier๋ฅผ ํตํด ์ํ๋ฅผ ๊ด๋ฆฌํ๋ฉฐ ๋ณ๊ฒฝ์ฌํญ ์ ํ
3. Provider์์ ์ํธ์์ฉ
์์ ฏ์์ WidgetRef ๊ฐ์ฒด๋ฅผ ์ป๊ธฐ ์ํด ์๋ก์ด ์์ ฏ์ ์ฌ์ฉํด์ผ ํ๋๋ฐ, ํด๋น ์์ ฏ๋ค์ ๋ค์๊ณผ ๊ฐ๋ค.
- ConsumerWidget
- ํด๋น ์์ ฏ์ ์์ํ๋ฉด build ํจ์์ ํ๋ผ๋ฏธํฐ๋ก ๋ฐ์ WidgetRef๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
class SearchBar extends ConsumerWidget {
const SearchBar({Key? key}): super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
String keyword = ref.watch(keywordProvider);
...
}
}
- ConsumerStateFulWidget + ConsumerState
- ConsumerState์์๋ ref๊ฐ ์์ฑ์ผ๋ก ์ ์๋์ด WidgetRef๋ฅผ build ์ธ์ ๋ค๋ฅธ ํจ์์์๋ ์ฌ์ฉํ ์ ์๋ค.
class SearchBar extends ConsumerStatefulWidget {
const SearchBar({Key? key}): super(key: key);
@override
ConsumerState<ConsumerStatefulWidget> createState() => _SearchBar();
}
class _SearchBar extends ConsumerState<SearchBar> {
@override
Widget build(BuildContext context) {
String keyword = ref.watch(keywordProvider);
...
}
}
4. ref์ ์ฃผ์ ์ฌ์ฉ ๋ฐฉ๋ฒ
- ref.watch
- Provider๋ฅผ ๊ตฌ๋ ํด ๋ณํ ๋ชจ๋ํฐ๋ง ๊ฐ๋ฅ
- ๊ฐ ๋ณ๊ฒฝ ์, ์์ ฏ ์ฌ๋น๋ ๋๋ ๊ตฌ๋ ์์น์ ์ํ๋ฅผ ์ ๋ฌ
- ์ํ ๋ณํ๋ฅผ ํ๋ฉด์ ์ฆ์ ๋ฐ์ํด์ผ ํ ๊ฒฝ์ฐ ์ฌ์ฉ
class ResultPage extends ConsumerStatefulWidget {
const ResultPage({Key? key}): super(key: key);
@override
ConsumerState<ConsumerStatefulWidget> createState() => _ResultPage();
}
class _ResultPage extends ConsumerState<ResultPage> {
@override
Widget build(BuildContext context) {
String keyword = ref.watch(keywordProvider);
...
return Scaffold(
appBar: AppBar(
...
flexibleSpace: ResultSearchBar(keyword),
}
}
- ref.read
- Provider์ ์ํ๋ฅผ ๊ฐ์ ธ์ค๊ณ ๊ฐ ๋ณ๊ฒฝ ๊ฐ๋ฅ
- ์ฌ์ฉ์์์ ์ํธ์์ฉ์ผ๋ก ์ธํด ๋ฐ์๋ ํธ๋ฆฌ๊ฑฐ ํจ์์์ ์ฌ์ฉ
void _setKeyword(String keyword) {
if (_debounce?.isActive ?? false) _debounce?.cancel();
_debounce = Timer(const Duration(milliseconds: 400), () {
ref.read(keywordProvider.notifier).setKeyword(keyword);
});
}
- ref.listen
- watch์ ๋์ผํ๊ฒ ๋ณํ๋ฅผ ๋ชจ๋ํฐ๋ง
- ์์ ฏ์ rebuildํ๊ฑฐ๋ ์ํ๋ฅผ ์ ๋ฌํ์ง ์๊ณ ๋ณ๊ฒฝ๋ ๋ ์ ์ํ ํจ์๋ง ์คํ
- Snackbar๋ Dialog๋ฅผ ์ฒ๋ฆฌํ ๋ ์ ์ฉํ๊ฒ ์ฌ์ฉ
void _makeSnackBar(){
ref.listen(
keywordProvider,
((previousState, newState) {
showSnackBar('new value is: $newState');
}),
);
}
5. ์ํ ํด๋์ค ์ ์
์ํ๋ก ์ฌ์ฉํ๋ ํด๋์ค๋ ๋ถ๋ณ(Immutable) ํด๋์ค์ฌ์ผ ํ๋๋ฐ, ๊ทธ ์ด์ ๋ ๋ค์๊ณผ ๊ฐ๋ค.
- ๋ถ๋ณ์ฑ์ผ๋ก ์ธํ ์์ ์ ์ธ ์ํ ์ถ์
- ๋ถ๋ณ ๊ฐ์ฒด๋ ์ํ๊ฐ ๋ณํ์ง ์์ ๊ฐ์ฒด๊ฐ ์ ๋ฐ์ดํธ๋ ๋๋ง๋ค ์๋ก์ด ๊ฐ์ฒด๊ฐ ์์ฑ๋์ด ์ํ ๋ณํ๊ฐ ๋ช ํํ๊ฒ ์ถ์ ๋ ์ ์๋๋ก ํจ - ๋น๋๊ธฐ ์์
๊ณผ์ ์ํธ์์ฉ
- ๋น๋๊ธฐ ์์ ์ ๊ฒฐ๊ณผ๋ฅผ ์ฒ๋ฆฌํ ๋ ์ผ๊ด์ฑ ์ ์ง๊ฐ ํธํจ - ๋ถ๋ณ์ฑ์ผ๋ก ์ธํ ์ฑ๋ฅ ์ต์ ํ
- ์ํ๊ฐ ๋ณํ๋์ง์ ๋ํ ์ฌ๋ถ๋ฅผ ์ฐธ์กฐ ๋น๊ต๊ฐ ์ฌ์ ์ฑ๋ฅ์ ์ ๋ฆฌ - ๋๋ฒ๊น
๊ณผ ํ
์คํธ ์ฉ์ด์ฑ
- ๋๋ฒ๊น ์ ์ํ์ ๋ณํ๋ฅผ ์ถ์ ํ๊ฑฐ๋ ํ ์คํธํ ๊ฒฝ์ฐ ์ผ๊ด๋ ๊ฒฐ๊ณผ๋ฅผ ์ป๊ธฐ ์ฌ์
๊ฐ๋จํ ๋งํด์ ๋น๋ถ๋ณ ํด๋์ค๋ฅผ ์ฌ์ฉํ๊ฒ ๋๋ฉด ์๋์น ์์ ์ ๋ฐ์ดํธ๊ฐ ๋ฐ์ํ ์ ์์ผ๋ฏ๋ก, ๊ทธ๋ฐ ์ํฉ์ ๋ง๊ณ ์ ๋ถ๋ณ ํด๋์ค๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด๋ค.
๋ถ๋ณ ํด๋์ค ์ ์ ์์๋ freezed๋ผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ํ๋ค.
6. ํ์ ํจํค์ง
Riverpod ๊ด๋ จ
- flutter_riverpod
- Flutter์์ Rivderpod๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํ ํจํค์ง
- riverpod_generator
- ์๋์ผ๋ก Riverpod์ Provider๋ฅผ ์ ์ํ๋ ํจํค์ง
- riverpod_annotation
- riverpod_generator์์ ์ฌ์ฉํ๋ ์ด๋ ธํ ์ด์ ์ ํ์ ํ๋ ํจํค์ง
๊ธฐํ ํจํค์ง
- build_runner
- ์ค์ ๋ก ์ฝ๋๋ฅผ ์๋ ์์ฑํ๋ ํจํค์ง
- freezed
- ๋ถ๋ณ ํด๋์ค๋ฅผ ์์ฑํ๊ธฐ ์ํ ํจํค์ง
- freezed_annotation
- freezed์์ ์ฌ์ฉํ๋ ์ด๋ ธํ ์ด์ ์ ํ์ ํ๋ ํจํค์ง
์ฐธ๊ณ
Riverpod
์ด๋์๋ ๊ณต์ ์ํ ์ ์ธํ๊ธฐ ๋ ์ด์ main.dart๊ณผ UI ํ์ผ ์ฌ์ด๋ฅผ ์ค๊ฐ ํ์๊ฐ ์์ต๋๋ค. ๊ณต์ ์ํ์ ์ฝ๋๋ฅผ ๋ณ๋์ ํจํค์ง์ ๋ฃ๋ , ํ์ํ ์์ ฏ ๋ฐ๋ก ์์ ๋ฃ๋ , ํ ์คํธ ๊ฐ๋ฅ์ฑ์ ์์ง ์๊ณ ์ ์
riverpod.dev
[Flutter] Riverpod ์ผ๋ก ์ํ ๊ด๋ฆฌ ํ๊ธฐ 2
์ ๋ฒ ์๊ฐ์ riverpod ์ด ๋ฌด์์ด๋ฉฐ, ์ ์ฌ์ฉํ๋์ง์ ๋ํด ์์๋ณด์๋ค. riverpod ์๋ provider ๋ผ๋ ์ค์ํ ์์๊ฐ ๋ฑ์ฅ ํ๋๋ฐ, ์ด๋ riverpod ์ ๋ชจํ๊ฒฉ์ธ provider ๋ผ๋ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์ ๋๋
velog.io
ํ๋ฌํฐ Riverpod๋ก ์ํ๊ด๋ฆฌ ํ๊ธฐ
์ํ๊ด๋ฆฌ์ ๋ํด ๊ณต๋ถํ ๋ด์ฉ๊ณผ Flutter์์ Riverpod์ ์ฌ์ฉํ ์ํ๊ด๋ฆฌ ๊ฒฝํ์ ๊ณต์ ํฉ๋๋ค. ๊ณต์ ๋ฌธ์์ ๋ณธ๋ฌธ์์๋ ์๊ฐํ์ง ์์ StreamProvider, FutureProvider ๋ฑ์ ๋ํ ์์๋ ํ์ธํ ์ ์์ต๋๋ค.
techblog.uplus.co.kr
[Flutter] ์ํ ๊ด๋ฆฌ ํจํค์ง Riverpod ์์๋ณด๊ธฐ
์ด ๊ธ์ Riverpod 2.0 ๊ธฐ์ค์ผ๋ก ์์ฑ๋์์ต๋๋ค. ์ด๋ฒ ํฌ์คํธ์์๋ ๊ณต์ ๋ฌธ์๋ฅผ ๋ณด๋ฉด์ Riverpod์ ๋ํด ์์๋ณด๊ณ , ์ Riverpod์ ์ฌ์ฉํด์ผ ํ๋์ง์ ๋ํด ์์๋ณด๊ฒ ์ต๋๋ค. ์ฌ์ฉ ๋ฐฉ๋ฒ์ ๊ฐ๋ตํ๊ฒ๋ง ๋ค
seosh817.tistory.com
Riverpod๋๏ผFlutter์ ๊ฐ์ฅ ์ฃผ์ํ ์ํ ๊ด๋ฆฌ๋ฅผ ์๊ฐํฉ๋๋ค๏ผ
์์ ์๊ฐํ 'StatefulWidget'๋ ์ํ ๊ด๋ฆฌ๋ฅผ ํ๋ ๊ธฐ๋ฅ์ ๋๋ค,์ฌ๋ฌ ํ๋ฉด๊ณผ ๊ธฐ๋ฅ์ ๊ฐ์ง ์ฑ์ ๊ตฌํํ ๊ฒฝ์ฐ, ๊ด๋ฆฌํด์ผ ํ ์ํ๋ ๋ง์์ง๊ณ ๊ทธ ๊ด๋ฆฌ๊ฐ ์ด๋ ค์์ง๋๋ค.์ด๋ฌํ ์ํ ๊ด๋ฆฌ๋ฅผ ์ฝ๊ฒ ํ
flutterdevelop.blog
Riverpod
RiverPod Flutter/Dart๋ฅผ ์ํ ๋ฐ์ํ ์บ์ฑ ํ๋ ์์ํฌ์ด๋ค. RiverPod์ ์ํ๊ด๋ฆฌ๋ฅผ ์ํด ์ฌ์ฉํ๋ ์ฃผ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ Provider์ ํ๊ณ๋ฅผ ๊ทน๋ณตํ๊ณ ๊ฐ์ ๋ ๊ธฐ๋ฅ์ ์ ๊ณตํ๊ธฐ ์ํ ๋ชฉ์ ์ผ๋ก ๊ฐ๋ฐ๋์๋ค. ์ค
velog.io
'Study > Flutter' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[Flutter] Flutter์ ์ํ๊ด๋ฆฌ - GetX (0) | 2025.01.23 |
---|---|
[Flutter] Flutter์ ์ํ๊ด๋ฆฌ - Provider (0) | 2025.01.17 |