MVC 패턴이란?

MVC는 Model - View - Controller 3가지로 이루어진 패턴입니다. 

 

 

그림 1

 

• Model : 데이터를 관리하는 클래스
• Controller : 데이터와 화면을 잇는 역할을 하는 클래스(ex MainActivity)
• View : 화면을 구성하는 사용자 인터페이스

MVP과 다른점이 있다면 Model이 View를 변경 할 수 있다는 점입니다. MVP는 Presenter를 통해서만 View ui변경이 가능 합니다.

 

아래에서 코드를 적용하여 예시를 들어보겠습니다.

 

일단 view(activity_main)를 만들어줍니다.

 

activity_main

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable name="activity" type="com.example.mvc.MainActivity" />
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        tools:context=".MainActivity">

        <GridLayout
            android:id="@+id/buttonGrid"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:columnCount="3"
            android:rowCount="3">

            <androidx.appcompat.widget.AppCompatButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:onClick="@{() -> activity.clickNumber(1)}"
                android:text="1" />

            <androidx.appcompat.widget.AppCompatButton
                android:text="2"
                android:layout_width="100dp"
                android:onClick="@{(view) -> activity.clickNumber(2)}"
                android:layout_height="100dp" />

            <androidx.appcompat.widget.AppCompatButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:onClick="@{() -> activity.clickNumber(3)}"
                android:text="3" />

            <androidx.appcompat.widget.AppCompatButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:onClick="@{() -> activity.clickNumber(4)}"
                android:text="4" />

            <androidx.appcompat.widget.AppCompatButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:onClick="@{() -> activity.clickNumber(5)}"
                android:text="5" />

            <androidx.appcompat.widget.AppCompatButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:onClick="@{() -> activity.clickNumber(6)}"
                android:text="6" />

            <androidx.appcompat.widget.AppCompatButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:onClick="@{() -> activity.clickNumber(7)}"
                android:text="7" />

            <androidx.appcompat.widget.AppCompatButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:onClick="@{() -> activity.clickNumber(8)}"
                android:text="8" />

            <androidx.appcompat.widget.AppCompatButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:onClick="@{() -> activity.clickNumber(9)}"
                android:text="9" />

        </GridLayout>

        <TextView
            android:visibility="invisible"
            android:id="@+id/message_success"
            android:layout_marginTop="30dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="비밀번호 언락 성공" />

    </LinearLayout>
</layout>

그림 2

 

 

 

Controller(MainActivity)를 만들어줍니다. Controller는 View와 연결되어 있고 Model도 생성하여 가지고 있습니다.

model 상태값에 따라 조건문을 충족하여 View.Visible 처리가 가능해집니다.

 

MainActivity

class MainActivity : AppCompatActivity() {
    // Controller
    lateinit var binding: ActivityMainBinding
    var model = Model()		// model클래스 생성
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        binding.activity = this
    }

    fun clickNumber(i : Int){
        Toast.makeText(this,"$i 번을 클릭했습니다.",Toast.LENGTH_SHORT).show()
        model.inputPassword(i)

        if(model.password.size == 4 && model.checkPassword()){	
        // model 상태값에 따라서 조건문 View의 visible을 변경시킴
            binding.messageSuccess.visibility = View.VISIBLE
        }
    }
}

 

 

데이터를 관리하는 클래스 Model을 만들어 줍니다.

 

Model

class Model {
    var password : MutableList<Int> = mutableListOf()	// password라는 데이터를 관리

    fun resetArray(){
        password.clear()
    }
    fun inputPassword(i : Int){
        if(password.size < 4){
            password.add(i)
        }
    }
    fun checkPassword() : Boolean{
        //SavePassword
        var trueCount = 0
        var savePassword = mutableListOf(1,2,3,4)	// 1234가 저장되어 있음

        for (i in 0 until savePassword.size){
            if(savePassword.get(i) == password.get(i)){
                trueCount++
            }
        }
        return trueCount == 4
    }
}

 

 

그림2의 숫자 버튼을 클릭하면 MainActivity(Controller)의  clickNumber()메소드가 실행됩니다. MainActivity에 생성되어 있는 Model 객체를 통하여 password에 클릭한 번호가 저장되게 되고 1234를 차례로 클릭하면 savePassword의 값과 같기 때문에 trueCount 값은 4가 되어 checkPassword() 메소드의 리턴값은 true가 됩니다. 

 

클릭이벤트 발생시 clickNumber()가 호출되고 model의 size == 4 && checkPassword()가 true일때 messageSuccess view값이 visible 처리가 되어 화면에 표시가 됩니다. 이것은 model이 view 변경에 영향을 주게된건데 mvc 특징이라고 할수 있습니다.

 

이같이 model과 view가 controller에 연결되어 있고 controller에서 model과 view를 업데이트 하는 구조를 mvc 라고 합니다.

 

 

 

 

참고자료 출처

https://www.youtube.com/watch?v=FwFIKRpSElo&t=38s