[디자인패턴] MVVM 패턴

MVVM 패턴

앱 아키텍처란?

앱 아키텍처는 애플리케이션의 전반적인 구조와 구성 요소, 그리고 이러한 구성 요소 간의 관계와 상호작용을 정의하는 설계 원칙을 의미합니다. 쉽게 말해, 앱을 구축하는 데 필요한 구성 요소들과 이들이 어떻게 함께 작동하고 연결되는지를 설명하는 방법론이라고 할 수 있습니다.

앱 개발에는 MVC, MVP, MVVM, VIPER 등 다양한 아키텍처 패턴이 존재하지만, 이들의 기본 원리는 동일합니다.

역할별로 레이어를 나누어 각 레이어가 자신의 역할에만 집중하게 설계합니다. 이렇게 레이어를 분리하면 수정, 테스트, 유지보수가 용이해집니다.

 

이번 글에서는 대표적인 아키텍처 패턴 중 하나인 MVVM 패턴에 대해 알아보겠습니다.

 

MVVM 패턴이란?

MVVM(Model-View-ViewModel) 패턴은 UI(View)와 비즈니스 로직(Model)을 중간 계층(ViewModel)으로 분리하여 코드의 유지보수성과 테스트 용이성을 높이는 소프트웨어 아키텍처 패턴입니다.

1. MVVM 구성 요소

Model:
데이터와 관련된 모든 로직을 처리하는 계층입니다.
데이터베이스나 API 호출을 통해 데이터를 가져오고 저장합니다.
View:
사용자가 보는 UI 화면입니다.
화면에 데이터를 표시하고 사용자 입력을 ViewModel로 전달합니다.
ViewModel:
Model과 View 사이에서 중개 역할을 합니다.
UI 로직과 상태를 관리하며, View와 Model 간의 의존성을 줄입니다.

 

2. MVVM 패턴의 동작 방식

1. Model:
   • 데이터 로직을 처리합니다. 예를 들어, 게시물 데이터를 가져오는 작업을 담당합니다.
2. ViewModel:
   • Model로부터 데이터를 가져오고 로직을 처리하여 View가 사용할 수 있는 형태로 변환합니다.
   • 예를 들어, 로딩 상태나 버튼 활성화 여부를 관리합니다.
3. View:
   • ViewModel로부터 데이터를 받아 UI를 업데이트합니다.
   • 사용자 입력을 ViewModel로 전달합니다.

---

구성요소의 정보

1. Model

• Post: 게시물 데이터를 표현하는 데이터 모델입니다.
• PostRepository: 외부 API와 통신하여 게시물 데이터를 가져오고 가공하는 역할을 합니다.

2. ViewModel

• PostViewModel:
  • PostRepository를 통해 데이터를 가져옵니다.
  • 데이터를 가공하여 View가 사용할 수 있도록 제공합니다.
  • 로딩 상태, 에러 상태 등을 관리합니다.

3. View

• PostListView:
  • 게시물 리스트를 보여주는 UI 화면입니다.
  • ViewModel에서 제공하는 데이터를 화면에 표시합니다.
  • 사용자의 입력(예: 새로고침 버튼 클릭)을 ViewModel로 전달합니다.

---

 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp02());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeView(),
    );
  }
}

// viewModel
class HomeViewModel {
  int _counter = 0;
  // getter
  int get counter => _counter;

  // 데이터를 변경하는 기능도 뷰 모델이 가진다.
  void incrementCounter() {
    _counter++;
  }
}

// View
class HomeView extends StatefulWidget {
  const HomeView({super.key});

  @override
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  // 뷰는 뷰 모델만 바라보면 된다.
  // 콤포지션 관계 - 내부에서 객체를 생성 --> 강한 소유에 관계이다.
  final HomeViewModel homeViewModel = HomeViewModel();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('뷰 모델을 사용하는 코드를 작성중...'),
      ),
      body: Column(
        children: [
          Text(
            '${homeViewModel.counter}',
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 12),
          ElevatedButton(
            onPressed: () {
              // 프레젠테이션 로직
              setState(() {
                // 비지니스 로직
                homeViewModel.incrementCounter();
              });
            },
            child: Text('increment'),
          )
        ],
      ),
    );
  }
}

 

Model과 ViewModel의 차이점

1. Model:
   • 데이터 로직 전담: 데이터 저장, 처리, 유효성 검사, 데이터베이스 및 네트워크 작업을 담당합니다.
   • UI와 무관: 사용자 인터페이스 상태나 화면과 관련된 로직은 포함하지 않습니다.
2. ViewModel:
   • 뷰 로직 전담: View와 관련된 로직, 사용자 입력 처리, 로딩 상태 관리 등을 담당합니다.
   • 데이터 변환: Model 데이터를 View에서 사용하기 적합한 형식으로 변환합니다.
   • UI 상태 관리: 버튼 활성화, 로딩 표시 여부 등 View의 상태를 관리합니다.

요약

• Model은 데이터 중심으로 동작하며, ViewModel은 UI와 관련된 상태와 로직 중심으로 동작합니다.