MVC 패턴 (Model - View - Contoller)

이번에 ASP.NET을 공부하면서 MVC 패턴을 처음 접하게 되었다.
그동안 "이러한 아키텍쳐 디자인 패턴이 있다." 정도로 알고 있었으나, 이번 기회에 제대로 이해해보고자 정리했다.

위키에서는

모델-뷰-컨트롤러 - 위키백과, 우리 모두의 백과사전

정리

- Controller : View, Model 사이에 위치하며 두 요소의 연관 관계를 조절함.

- View : Model을 사용자에게 Interface하는 역할.

- Model : 데이터 또는 데이터에 대한 처리를 담당.

 

빗대어 보기

검색창에 MVC를 검색하면 핵심적인 개념만 설명하고 있다.

실력이 좋은 개발자는 패턴의 구성을 보고 단번에 이해할 수 있겠지만, 나는 그렇지 않기 때문에....

내가 이해한 MVC 패턴을 실제 현상에 빗대어 이해하기로 했다. (정확하게 이해한게 맞겠지...?)

 

Controller

사용자는 게임 컨트롤러를 통해 콘솔기기를 제어한다.

이때 게임 컨트롤러는 MVC 패턴의 Controller 역할을 수행한다.

Model

게임 콘솔기기는 컨트롤러를 통한 게임 제어를 처리 및 수행한다.

이때 콘솔 기기는 MVC 패턴의 Model 역할을 수행한다.

View

게임 콘솔기기를 통해 화면에 게임 화면이 나타난다.

이때 TV 등의 영상 출력 기기는 MVC 패턴의 View 역할을 수행한다.

 

사용

직접 코드로 MVC 패턴을 보기로 하자.

현재 ASP를 공부하고 있기 때문에 ASP .NET Framework 환경에서 예제를 구성해보았다. ASP 환경에서는 MVC 패턴의 구성을 제공하고 있기 때문에 처음 접하기엔 더 쉽게 다가갈 수 있을 것이다.

Model

아래와 같이 사람의 신상 정보를 담은 객체가 있다고 가정하자. 

이름, 나이, 전공, 주소의 정보를 가지고 있고 이 객체가 예제의 Model 역할을 한다.

 

- Model은 Controller, View에 대한 의존성이 없이 독립적으로 작성되어야 한다.

 

  public class Person
  {
      public string Name { get; set; }
      public int Age { get; set; }
      public string Major { get; set; }
      public string Address { get; set; }
  }

Controller

아래는 컨트롤러의 코드이다.

Model에 구성되어 있는 Person의 객체를 생성하고 생성된 객체를 View에 넘겨주는 역할을 한다.

 

- Controller는 View와 Model 사이의 조정을 담당하기 때문에 View, Model에 대해 의존이 가능하다.

 public class TestController : Controller
 {
     public ActionResult Update()
     {
         var person = new Person()
         {
             Name = "Jay",
             Address = "Seoul",
             Age = 30,
             Major = "Computer Science",
         };
         
         return View(person);
     }
 }

View

View에서는 전달받은 Model을 사용자에게 인터페이스한다.

ASP.NET 환경에서는 html 사이에 C# 코드를 작성할 수 있게 환경을 제공한다.

(이는 다른 Framework도 지원하는 것으로 아는데, 나중에 다른 포스팅에서 다루기로 하자.)

 

- View는 Model에만 의존해야 하고 Controller와는 독립적으로 구성되어야 한다.

- 오직 Controller만 Model의 데이터를 View에 전달할 수 있다. 

@model MVC.Models.Person
@{
    ViewBag.Title = "UpdateView";
}

<h2>UpdateView</h2>

<dt>
    @Html.DisplayNameFor(model => model.Name) :  @Html.DisplayFor(model => model.Name)
</dt>
<dt>
    @Html.DisplayNameFor(model => model.Address) :  @Html.DisplayFor(model => model.Address)
</dt>
<dt>
    @Html.DisplayNameFor(model => model.Age) :  @Html.DisplayFor(model => model.Age)
</dt>
<dt>
    @Html.DisplayNameFor(model => model.Major) :  @Html.DisplayFor(model => model.Major)
</dt>

출력

위와 같이 작성된 코드를 실행하면 아래와 같은 화면이 나타나는 것을 확인할 수 있다.

https://github.com/jaywapp/Tutorials/tree/master/MVC