MVC(모델-뷰-컨트롤러)

웹 서버/ASP.NET Core 둘러보기

MVC(모델-뷰-컨트롤러)

코다람쥐 2022. 4. 23. 21:45

1. MVC 철학

- MVC 로 나누는 이유

일반적으로 처음 코딩을 했을 때 모든 데이터, 기능 등을 Main함수 안에 다 넣어버리게 된다.

이렇게 코딩을 하였을 때 규모가 커지면 데이터, 랜더링, 모델 등의 코드들이 꼬일 수도 있다는 위험이 있다.

결국에는 이러한 문제점을 막기위해 ASP .NET Core에서 여러가지 모델들을 만들어 주었는데 그 중 하나가 MVC이다.

Model : 원본 데이터를 다룸. 원래의 데이터를 모델링을 어떻게 할 것이냐가 된다.

View : UI를 어떻게 표시해줄지를 나타내는데 html태그를 이용함.

Controller : 버튼 클릭 등에 관련된 각종 이벤트를 처리하는 액션을 다룬다.

그리고 비어 있는 프로젝트를 통해 실제로 MVC패턴을 구현해보기로 한다.

2. MVC 구현

먼저 MVC에는 Models, Views, Controllers의 3개의 폴더가 있는데 똑같은 이름으로 HelloEmpty 내에 폴더를 만들어주고 내부의 폴더도 같은 이름으로 생성한다.

먼저 Models 폴더내에 HomeController.cs파일을 만들어준다.

HomController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace HelloEmpty.Models
{
    public class HelloMessage
    {
        public string Message { get; set; }
    }
}

다음으로 Controllers 폴더내에 "HomeController.cs"파일을 만들어준다.

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using HelloEmpty.Models;
using Microsoft.AspNetCore.Mvc;

namespace HelloEmpty.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            HelloMessage msg = new HelloMessage()
            {
                Message = "Welcome to Asp.Net MVC!"
            };

            ViewBag.Noti = "Input message and Click submit"; // 뷰에게 알려줌

            return View(msg); // 메시지를 뷰에게 넘김
        }

        // Post를 처리하는 Index
        [HttpPost] // Post를 처리한다는 뜻으로 선언
        public IActionResult Index(HelloMessage obj)
        {
            ViewBag.Noti = "Message Changed";
            return View(obj);
        }
    }
}

그리고 웹 페이지에서 출력할 용도의 Views를 생성한다.

Index.cshtml

<!-- 모델과 연동 -->
@model HelloEmpty.Models.HelloMessage

<html>
<head>
    <title>Hello MVC !</title>
</head>
<body>
    <!-- 골뱅이는 C#코드와 관련되었다는 뜻이다. -->
    <h1>@Model.Message</h1>
    <hr />
    <h2>@ViewBag.Noti</h2>

    <form asp-controller="Home" asp-action="Index" method="post">
        <label asp-for="Message">Enter Message</label>
        <br />
        <input type="text" asp-for="Message" />
        <br />
        <button type="submit">Submit</button>
    </form>

</body>
</html>

.cshtml이라는 확장자가 특이한데 html+C#을 적절하게 섞은 버전이라고 보면 된다.

_Viewimports.cshtml

@using HelloEmpty
@using HelloEmpty.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Startup.cs

Startup은 생성할 때 자동으로 구현되어 있는 코드인데 다음의 두 함수내용만 바꿔주면 된다.

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews(); // MVC를 사용하겠다는 뜻
        }

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Index}/{id?}");
            });

위의 코드들을 구현한 후 F5를 눌러서 실행하면 다음과 같은 홈페이지가 뜬다.

텍스트상자에 test!라고 입력하고 Submit을 제출하면

HomeControll.cs에서

        // Post를 처리하는 Index
        [HttpPost] // Post를 처리한다는 뜻으로 선언
        public IActionResult Index(HelloMessage obj)
        {
            ViewBag.Noti = "Message Changed";
            return View(obj);
        }

위의 코드가 처리를 받아 Submit버튼을 처리한다.

3. MVC의 한계

MVC사실 복잡한 코드를 처리하려고 만든 패턴이긴하지만 실제로 사용해보면 MVC를 사용함으로써 더 복잡해지기도 한다. 그 이유는 코드를 유지보수할 때 Model, View, Controller를 3가지 전부 다 점검해야되기 때문이다. 이는 코드가 규모가 커질수록 3배는 더 복잡해짐을 의미한다. 오래된 코드들은 MVC패턴을 많이 사용하고 있지만 최근에 와서는 MVC패턴을 거의 사용하지 않고, 최신 프로젝트를 진행할 때는 사용하는 걸 추천하지도 않는다.

개념적으로만 이해하자