2024. 11. 18 Flutter UI 프레임워크 riverpod 과 MVVM 활용(6)

 

화면의 데이터(상태)를 관리하는 PostListViewModel 을 먼저 만들어 보자. - 6

 

post_list_page.dart

import 'package:flutter/material.dart';

class PostListPage extends StatelessWidget {
  const PostListPage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

 

post_list_view_model.dart

import 'package:class_riverprod_mvvm/repository/post_repository.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import '../models/post.dart';

// 리버팟 중에 notifier 계열이 상태 관리를 담당해주는 클래스이다.

// StateNotifier
// 1. 멤버 변수로 T state 변수를 가지고 있다.
// 2. 캡슐화에 핵심이다.
class PostListViewModel extends StateNotifier<List<Post>> {

  // // 관리해야 되는 상태는 뭘까?
  // // 화면 --> [ [post], [post], [post] ]
  //
  // List<Post> postList = [];
  // // 화면을 다시 갱신 해주어야 한다.
  // // 리버팟을 사용하면 자동으로 갱신을 해 준다.


  // 통신 요청을 통해서 데이터를 가져오는 비즈니스 로직을 담당 시킨다.
  final PostRepository _postRepository;

  // T state --> List<Post> <---
  // 맨 처음 부모클래스 StateNotifier를 가지고 있는 PostListViewModel에 상태는
  // 당연히 빈 값을 들고 있다.
  PostListViewModel(this._postRepository): super([]);
   
  // 비즈니스 로직
  Future<void> fetchPosts() async {
      // List<Post> = []
    try {
      final posts = await _postRepository.fetchPosts();
      // List<Post>
      state = posts;
    } catch(e) {
      // List<Post>
    }
  } // end of fetchPosts()

  // 삭제하는 비즈니스 로직을 만들어 보자.
  Future<void> deletePost(int id) async {
    try{
      await _postRepository.deletePost(id);
      // 리스트 10개중에 1개를 삭제 했음 --> List<Post> 값 상태가 변경이 되었다.
      // state --> [Post(), Post(), Post() ];

      // 상태가 변경이 되면 새로운 리스트 객체를 state 변수에 넣어 주어야 한다.
      // 상태가 변경이 되었구나 확인해서 화면을 자동으로 갱신해 준다.

      // state --> [Post(), 삭제, Post() ];
      state = state.where( (post) => post.id != id ).toList(); // 새로운 리스트 객체가 생성
      print("삭제완료");
    }catch(e) {
      print('삭제 실패 : ${e}');
    }
  } // end of deletePost()

}

 

• 리버팟에 상태를 관리하는 클래스는 notifier 계열입니다.
  StateNotifier는 상태 관리를 위해 사용되는 리버팟의 notifier 계열 중 하나입니다. StateNotifier는 상태를 변경하고, 변경 사항을 알리는 역할을 하기 때문에 상태 관리를 위한 대표적인 notifier입니다.
• MVVM 패턴에서는 ViewModel이 뷰의 상태를 관리하고, 뷰와 비즈니스 로직을 연결해줍니다
• StateNotifier를 사용함으로써 상태 관리의 흐름을 간소화하고 상태 변경을 자동으로 UI에 반영할 수 있습니다.
  이를 통해 직접 상태를 갱신하고 변경 사항을 뷰에 반영하는 작업을 줄일 수 있기 때문에 상태 관리의 자동화
• 이 프로젝트에서는 ViewModel 클래스에 상태 관리용으로 StateNotifier를 사용할 예정입니다.