📝 Flutter Riverpod을 활용한 MVVM 패턴 정리Flutter에서 Riverpod을 활용한 MVVM 패턴을 적용하면 상태 관리를 더욱 간결하고 효율적으로 할 수 있습니다.이번 포스팅에서는 기본적인 MVVM 패턴을 Riverpod을 활용하여 개선하는 과정을 살펴보겠습니다.1️⃣ MVVM 패턴이란?👉 UI(View)와 비즈니스 로직(Model)을 ViewModel을 통해 분리하여 코드의 유지보수성과 테스트 용이성을 높이는 패턴👉 기존의 setState() 방식 대신 Riverpod을 활용하여 전역 상태 관리2️⃣ MVVM 패턴 구현이번 구현에서는 Riverpod을 사용하여 MVVM 패턴을 적용할 것입니다.📌 구조Model (todo_item.dart): 데이터 모델을 정의.ViewMode..

📝 Flutter MV 패턴 & MVVM 패턴 정리Flutter에서 MV (Model-View) 패턴과 MVVM (Model-View-ViewModel) 패턴을 활용하여 코드의 유지보수성과 가독성을 높일 수 있습니다.이번 포스팅에서는 MV → MVVM으로 발전하는 과정을 코드 예제와 함께 살펴보겠습니다.1️⃣ MV (Model-View) 패턴 적용👉 Model과 View만 존재하는 구조👉 비즈니스 로직이 View에 포함됨 (View와 Model이 강하게 결합됨)📌 Step 1: Model 생성 (todo_item.dart)👉 Model은 데이터를 표현하는 역할을 담당// Modelclass TodoItem { String title; bool isDone; TodoItem({required..

📝 Flutter MVVM 패턴 정리Flutter에서 애플리케이션을 개발할 때, 유지보수성과 확장성을 높이기 위해 MVVM (Model-View-ViewModel) 패턴을 적용할 수 있습니다.이번 포스팅에서는 MVVM 패턴의 개념과 코드 예제를 통해 어떻게 구조화할 수 있는지 알아보겠습니다. 1️⃣ 앱 아키텍처란?✅ 개념애플리케이션의 전반적인 구조와 구성요소, 그리고 이들 간의 관계와 상호작용을 정의하는 설계 원칙입니다.쉽게 말해, 앱을 구성하는 방법론을 의미합니다.다양한 아키텍처 패턴이 존재하지만, 기본 원리는 동일합니다.역할별로 레이어를 나누어 각 레이어가 자신의 역할에 집중하도록 설계.이를 통해 수정, 테스트, 유지보수가 용이해집니다.2️⃣ MVC 패턴을 사용하는 이유✅ 개념가장 기본적인 디자인 ..

📝 Flutter Riverpod 상태 관리 정리Flutter에서 상태 관리를 쉽게 하기 위해 Riverpod을 활용할 수 있습니다.Riverpod에는 여러 가지 Provider가 존재하며, 각각의 역할이 다릅니다.이번 포스팅에서는 Provider, StateNotifierProvider, NotifierProvider의 차이점을 정리하고,주석을 포함한 예제 코드와 함께 개념을 설명하겠습니다. 1️⃣ Provider (단순 데이터 제공)✅ 개념Provider는 단순히 데이터를 제공하는 역할을 합니다.상태 변경이 필요 없는 정적인 데이터를 관리할 때 사용됩니다.한 번 데이터를 제공하면 더 이상 변경할 수 없습니다.✅ 코드 예제import 'package:flutter_riverpod/flutter_riv..

3단계: InheritedWidget으로 상태 관리하기 💡 InheritedWidget은 props drilling 문제를 해결하기 위한 Flutter의 기본 상태 관리 방법 중 하나다.하위 위젯들이 중첩된 경우 상태나 데이터를 전달하기 어려운 상황에서 상위 위젯의 상태를 공유하고, 하위 위젯들이 이를 활용할 수 있도록 돕는다.하지만 몇 가지 단점이 존재해 더 나은 상태 관리 라이브러리인 Provider나 Riverpod을 많이 사용하는데, 이에 대해서는 다음 포스팅에 언급하겠다.Inherited_Parent// InheritedWidget 내장 데이터 타입을 상속받아 구현한다.import 'package:flutter/cupertino.dart';import '../common.utils/logger..

2단계: 도서 관리 앱으로 상태 변화 관리하기 💡 도서 관리 앱 - 위젯 트리 구조 (StatefulWidget을 이용한 상태 관리)homePage (StatefulWidget)| ├── 공유 상태: 대출 목록에 추가된 도서 목록 (공유 상태)|├── Library (Store 역할)| ├── Book 1 (도서 목록)| ├── Book 2| ├── Book 3| └── Book 4|└── BorrowList (Cart 역할) ├── Book 2 (대출 목록에 추가된 책) └── Book 4 코드 구성 main.dart import 'package:flutter/material.dart';import 'home_screen.dart';void main()..

💡 우리가 배울 여러 상태 관리 방법을 이용해 데이터 일관성을 유지 해보자!StatefulWidgetInheritedWidgetProvider(라이브러리)Riverpod(라이브러리)1단계: 기본 위젯 (StatelessWidget & StatefulWidget) 💡  StatelessWidget이란 상태 변화 없이 항상 동일한 UI를 그리는 위젯import 'package:flutter/material.dart';void main() { runApp( MaterialApp( home: MySatelessWidget(), ), );}class MySatelessWidget extends StatelessWidget { const MySatelessWidget({super.key..

💡 상태는 공유 여부에 따라 로컬 상태(Local State)와 공유 상태(Shared State)로 나눌 수 있다! Differentiate between ephemeral state and app stateHow to tell the difference between ephemeral and app state.docs.flutter.dev로컬 상태(Local State) : 공유되지 않는 상태BottomNavigationBar의 현재 선택한 탭공유 상태(Shared State) : 여러 위젯에서 공유되어 표현되는 상태로그인한 유저 정보특정 게시글의 좋아요 표시쇼핑 앱의 장바구니💡  공유 상태는 상태가 변경될 경우, 동일한 상태를 보여주기 위해 동기화가 필요  ※ 상태 관리 이해하기💡 공유 상태가..