[flutter] MVC Pattern 적용하기

MVC 모델이란 ?

• M : model / 데이터와 비즈니스 로직을 담당
• V : view / 사용자의 인터페이스를 담당
• C : controller / model과 view 사이의 중개 역할

MVC 모델이란 애플리케이션을 세가지 MVC 각각의 역할로 구분하여 개발하는 디자인 패턴이다. 하지만, 앞서 말했듯이 MVC 모델이란 하나의 방법론이기 때문에 개발하는 분야 혹은 언어 등에 따라 조금은 다를 수 있다.

우선, Model은 데이터베이스 등 받거나 보낼 데이터를 하나의 객체(class)로 관리하기 위해 Class를 선언하는 부분이다. 그리고 View는 사용자가 보는 UI를 뜻한다. 마지막으로 Controller는 Model에서 선언한 class를 인스턴스(instance)하고, View에 데이터를 뿌려주는 역할을 한다.

MVC 모델을 왜 사용할까?

처음 개발할 때는 왜 이런 디자인 패턴을 쓰는지 감도 안 잡히고, 어렵게만 느껴졌다. 하지만, 코드가 길어지거나, 협업을 할 때 정말 빛을 본거 같다.

• 유지 보수성이 높다. model, view, controller 각자의 역할이 명확하기 때문에 한 독립적으로 개발할 수 있다.
• 확장성이 높다. 새로운 기능을 추가하거나 기존 기능을 수정하기 쉽다.
• 테스트가 쉽다.

위와 같은 이유 덕분에 협업에 매우 유용했다.

말로 하는 것보다는 코드를 보며 직접 감을 익히는 것이 제일 좋은거 같다. 밑에 예제를 보자.

예제

폴더 구조

폴더는 MVC에 맞게 다음과 같이 구성했다.

person_model.dart

class Person {
  String? name;
  int? age;

  Person({this.name, this.age});
 }

json 데이터를 받아오는 경우에는 다음과 같이 model을 선언할 수 있다.

class Person {
  String? name;
  int? age;

  Person({this.name, this.age});

  Person.fromJson(Map<String, dynamic> json) {
    name = json['name'];
    age = json['age'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['name'] = this.name;
    data['age'] = this.age;
    return data;
  }
}

이런 작업들을 편하게 할 수 있도록 도와주는 사이트가 있다.
https://javiercbk.github.io/json_to_dart/

이렇게 json 데이터의 형식을 올리면 다음과 같이 바로 코드를 생성해준다.

person.json

{
    "name": "chulsu",
    "age": 20
}

controller를 편하게 사용하기 위해 "getx" 라이브러리를 사용할 것이다. 이에 관한 자세한 내용은 따로 올리겠다.
간단하게 obs는 객체를 관찰하여 값이 바뀌면 변화시켜주는 것 Obx는 이 객체를 관찰한 것을 update 해주는 영역으로 생각하면 편하다.

person_controller.dart

import '../model/person_model.dart';
// 밑에 라이브러리들은 puspect.yaml 파일에 dependency에 추가해야 한다.
import 'package:get/get.dart';
import 'dart:convert'; // 디코드를 위한 라이브러리
import 'package:flutter/services.dart' show rootBundle; // json 데이터를 불러오기 위한 라이브러리

class PersonController extends GetxController {
  var person = ProfileModel().obs; // 객체 인스턴스

  // 객체를 선언할 때 json 데이터를 읽어 값을 저장하기 위함
  @override
  void onInit() {
    super.onInit();
    fetchPersonFromJson();
  }
  
  void fetchPersonFromJson() async {
    String _data = await rootBundle.loadString('assets/person.json');
    Map<String, dynamic> data = json.decode(_data);
    person.value = Person.fromJson(data);
  }
}

person.value에 값이 저장되어 있기 때문에 데이터를 사용하기 위해서는 person.value.name, person.value.age 이런식으로 사용하여야 한다.

서버에서 받은 데이터를 이용할 때는 HTTP 또는 Dio를 이용하여야 하는데 이에 관련해서는 따로 글을 올리겠다.

person_page.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

  @override
  Widget build(BuildContext context) {
    final PersonController personController = Get.put(PersonController);

    final String name = personController.person.value.name ?? 'taehun';
    final int age = personController.person.value.age ?? 0;

    return Scaffold(
        appBar: AppBar(
          title: const Text("Hello"),
        ),
        body: Obx(() => Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("name : $name"),
              Text("age : $age"),
            ],
          ),
        )),
    );
  }
}

이렇게 view를 구성하면 된다.

최근 dart에는 nullsafety 때문에 위처럼 변수를 선언할 때 null일 경우를 대비하여 저렇게 선언해야 한다.
이에 관련해서도 글을 올리도록 하겠다.

오늘은 MVC에 대해 간단하게 살펴보고 적용 예제도 봤습니다.
긴 글 읽느라 정말 고생했습니다. 감사합니다.
학부생인지라 부족한 부분이 많습니다. 댓글 혹은 메일로 보내주시면 내용 수정 및 보완하겠습니다 ❤️