📚 Today I Learned 23회차 - MVVM & Riverpod 상태 관리 💡

오늘은 Flutter 앱 개발에서 핵심적인 MVVM 아키텍처와 Riverpod을 활용한 상태 관리에 대해 학습했습니다. MVVM 패턴이 왜 필요한지, 그리고 Riverpod이 어떻게 이를 효율적으로 구현하도록 도와주는지 실습을 통해 익혔어요! 🚀

🎯 학습 목표

• MVVM 아키텍처의 개념과 각 계층의 역할 이해하기
• Riverpod 라이브러리를 사용한 상태 관리 방법 익히기
• Notifier와 NotifierProvider를 활용한 ViewModel 구현하기
• Consumer 위젯을 통한 상태 구독 및 UI 업데이트 구현하기

📚 주요 내용

⭐ MVVM 아키텍처

MVVM은 Model + View + ViewModel의 약자로, 앱의 구조를 세 가지 계층으로 분리하는 아키텍처 패턴입니다.

📊 MVVM 동작 흐름

┌─────────────────────────────────────────────────────┐
│                     View (UI)                       │
│                    └── Widget                       │
└──────────────┬─────────────────────▲────────────────┘
               │                     │
          ① 사용자 액션          ⑦ 상태 변경 감지
          (버튼 클릭 등)           (화면 업데이트)
               │                     │
               ▼                     │
┌─────────────────────────────────────────────────────┐
│              ViewModel                              │
│              └── 상태 관리 및 비즈니스 로직               │
│               (View를 알지 못함)                       │
└──────────────┬─────────────────────▲────────────────┘
               │                     │
          ③ 로직 처리           ⑤ 데이터 가공
          ④ 데이터 요청         ⑥ 상태 업데이트
               │                     │
               ▼                     │
┌─────────────────────────────────────────────────────┐
│                  Model (Data)                       │
│                  └── Repository, API                │
└─────────────────────────────────────────────────────┘

💡 MVVM의 장점

장점	설명
코드 분리	각 계층의 역할에 맞게 코드를 작성하여 코드가 깔끔해짐
테스트 용이	각 계층별로 독립적인 테스트 작성이 가능
낮은 결합도	View는 ViewModel을 참조하지만, ViewModel은 어떤 View가 참조하는지 모름
유지보수성	로직과 UI가 분리되어 수정이 용이함

💡 핵심: Flutter에서는 상태 관리 라이브러리(Riverpod, Provider 등)를 통해 MVVM을 효과적으로 구현할 수 있습니다!

⚡ Riverpod 상태 관리

Riverpod은 Flutter에서 상태 관리를 편하게 할 수 있는 강력한 라이브러리입니다.

🔍 Riverpod의 주요 특징

• 개발자 친화적: 상태 관리를 간단하고 직관적으로 구현 가능
• ViewModel 역할 지원: 상태를 관리하고 변경을 알리는 역할을 쉽게 구현
• View와 ViewModel 연결: Consumer 위젯을 통해 쉽게 상태를 관찰하고 UI 업데이트

🛠️ Riverpod 핵심 구성 요소

구성 요소	역할	주요 메서드/특징
Notifier	상태를 저장하고 업데이트하는 클래스	build(): 최초 상태 반환 state: 상태 업데이트 시 새 객체 생성
NotifierProvider	ViewModel을 위젯에 공급하는 객체	ViewModel을 전역적으로 제공
Consumer	ViewModel의 상태를 구독하는 위젯	상태 변경 시 자동으로 UI 리빌드
ProviderScope	모든 Provider를 사용 가능하게 하는 최상위 위젯	main() 함수에서 앱 전체를 감쌈

💻 실습 및 예제

📦 1. Riverpod 패키지 설치

# pubspec.yaml에 패키지 추가
flutter pub add flutter_riverpod

🏗️ 2. 프로젝트 구조

lib/
├── main.dart                  # 앱 진입점
├── models/
│   └── user.dart              # 데이터 모델
├── repositories/
│   └── user_repository.dart   # 데이터 가져오기
├── viewmodels/
│   └── user_viewmodel.dart    # 상태 관리 로직
└── views/
    └── user_list_screen.dart  # UI 위젯

🔧 3. 구현 예제

Model 클래스 만들기

// models/user.dart
class User {
  final int id;
  final String name;
  final String email;

  // 생성자
  User({
    required this.id,
    required this.name,
    required this.email,
  });

  // 상태를 불변으로 관리하기 위한 copyWith 메서드
  User copyWith({
    int? id,
    String? name,
    String? email,
  }) {
    return User(
      id: id ?? this.id,
      name: name ?? this.name,
      email: email ?? this.email,
    );
  }
}

Repository 클래스 만들기

// repositories/user_repository.dart
class UserRepository {
  // API나 로컬 DB에서 데이터 가져오기
  Future<List<User>> fetchUsers() async {
    // 실제로는 HTTP 요청이나 DB 쿼리
    await Future.delayed(Duration(seconds: 1)); // 네트워크 지연 시뮬레이션

    return [
      User(id: 1, name: '김철수', email: 'kim@example.com'),
      User(id: 2, name: '이영희', email: 'lee@example.com'),
      User(id: 3, name: '박민수', email: 'park@example.com'),
    ];
  }
}

ViewModel 만들기 (Notifier 상속)

// viewmodels/user_viewmodel.dart
import 'package:flutter_riverpod/flutter_riverpod.dart';

// 상태 클래스 정의
class UserListState {
  final List<User> users;
  final bool isLoading;

  UserListState({
    required this.users,
    required this.isLoading,
  });

  // 초기 상태
  factory UserListState.initial() {
    return UserListState(
      users: [],
      isLoading: false,
    );
  }

  // 상태 복사 메서드
  UserListState copyWith({
    List<User>? users,
    bool? isLoading,
  }) {
    return UserListState(
      users: users ?? this.users,
      isLoading: isLoading ?? this.isLoading,
    );
  }
}

// ViewModel 클래스 (Notifier 상속)
class UserViewModel extends Notifier<UserListState> {
  final UserRepository _repository = UserRepository();

  // build(): 최초 상태 반환
  @override
  UserListState build() {
    return UserListState.initial();
  }

  // 사용자 목록 로드 메서드
  Future<void> loadUsers() async {
    // 로딩 상태로 변경 (새로운 객체 생성)
    state = state.copyWith(isLoading: true);

    try {
      // Repository에서 데이터 가져오기
      final users = await _repository.fetchUsers();

      // 상태 업데이트 (새로운 객체 생성)
      state = state.copyWith(
        users: users,
        isLoading: false,
      );
    } catch (e) {
      // 에러 처리
      state = state.copyWith(isLoading: false);
    }
  }

  // 사용자 추가 메서드
  void addUser(User user) {
    state = state.copyWith(
      users: [...state.users, user],
    );
  }
}

// NotifierProvider 객체 생성 (전역 변수)
final userViewModelProvider = NotifierProvider<UserViewModel, UserListState>(() {
  return UserViewModel();
});

View에서 사용하기 (Consumer 위젯)

// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  // ProviderScope로 앱 전체를 감싸기 (필수!)
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UserListScreen(),
    );
  }
}

// views/user_list_screen.dart
class UserListScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // ViewModel의 상태를 구독 (watch)
    final userState = ref.watch(userViewModelProvider);

    // ViewModel의 메서드에 접근 (read)
    final viewModel = ref.read(userViewModelProvider.notifier);

    return Scaffold(
      appBar: AppBar(
        title: Text('사용자 목록'),
      ),
      body: userState.isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: userState.users.length,
              itemBuilder: (context, index) {
                final user = userState.users[index];
                return ListTile(
                  leading: CircleAvatar(child: Text('${user.id}')),
                  title: Text(user.name),
                  subtitle: Text(user.email),
                );
              },
            ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // ViewModel의 메서드 호출
          viewModel.loadUsers();
        },
        child: Icon(Icons.refresh),
      ),
    );
  }
}

🎯 Riverpod 사용 시 핵심 포인트

💡 상태 업데이트 원칙: 상태를 업데이트할 때는 항상 새로운 객체를 만들어서 변경해야 합니다!

// ❌ 잘못된 방법 - 직접 수정하면 UI가 업데이트되지 않음
state.users.add(newUser);

// ✅ 올바른 방법 - 새로운 객체 생성
state = state.copyWith(
  users: [...state.users, newUser],
);

🚀 Riverpod 사용의 장점 정리

장점	설명
전역 상태 관리	Provider가 ViewModel을 전역적으로 공급하여 어디서든 접근 가능
불필요한 파라미터 전달 제거	하위 위젯에 props로 계속 전달할 필요 없음
코드 분리	위젯은 UI만, ViewModel은 상태 관리만 담당하여 유지보수 용이
타입 안정성	컴파일 타임에 오류 감지 가능

📝 마무리

✅ 오늘 배운 것

• MVVM 아키텍처: Model, View, ViewModel의 역할 분리를 통해 깔끔한 코드 구조 구현
• Riverpod의 핵심 개념: Notifier, NotifierProvider, Consumer 위젯의 역할과 사용법
• 상태 관리 패턴: 불변 상태 관리를 위한 copyWith 메서드 활용
• 실습 구현: 사용자 목록을 관리하는 완전한 MVVM + Riverpod 예제 작성