뷰: 뷰 개요

뷰

MVC(Model-View-Controller) 패턴에서 뷰(View)는 사용자와 응용 프로그램 간의 상호작용에 대한 프리젠테이션 세부 내역을 캡슐화하는 역할을 수행합니다. 뷰는 내부에 클라이언트로 전송될 콘텐츠를 생성하는 코드를 포함하고 있는 HTML 템플릿입니다. ASP.NET Core MVC의 뷰는 최소한의 코드와 절차로 HTML과 상호작용하는 코드를 작성할 수 있는 Razor 구문을 사용합니다.

기본적으로 ASP.NET Core MVC의 뷰는 응용 프로그램의 Views 폴더에 저장되며 .cshtml 이라는 파일 확장자를 갖습니다. 일반적으로 각 컨트롤러들은 해당 컨트롤러의 액션들이 사용하는 뷰들이 저장되는 자신만의 폴더를 갖고 있습니다.

이런 액션 전용 뷰 외에도, 부분 뷰(Partial Views)나 레이아웃(Layouts), 그리고 그 밖의 특수한 뷰 파일들을 이용해서 불필요한 반복을 줄이고 응용 프로그램에서 사용되는 뷰들의 재사용성을 높일 수 있습니다.

뷰의 장점

뷰는 사용자 인터페이스 수준의 마크업과 업무 로직을 따로 분리해서 캡슐화시킴으로써 MVC 응용 프로그램 내부의 관심사의 분리를 제공해줍니다. ASP.NET Core MVC의 뷰는 HTML 마크업과 서버 측 로직을 번거로움 없이 전환해가면서 작업할 수 있는 Razor 구문을 사용합니다. 일반적으로 응용 프로그램의 사용자 인터페이스에 존재하는 반복적인 부분들은 레이아웃이나 공유 지시문, 또는 부분 뷰를 사용해서 뷰들 간에 손쉽게 재사용이 가능합니다.

뷰 생성하기

특정 컨트롤러와 관련된 뷰들은 Views/[ControllerName] 폴더에 만들어집니다. 반면 컨트롤러들 간에 공유되는 뷰들은 /Views/Shared 폴더에 위치해야 합니다. 뷰 파일의 이름은 관련된 컨트롤러 액션의 이름과 같고, 뒤에 .cshtml 이라는 파일 확장자가 추가됩니다. 예를 들어서, Home 컨트롤러의 About 액션에서 사용할 뷰를 생성하려면 /Views/Home 폴더에 About.cshtml 이라는 이름으로 파일을 생성하면 됩니다.

다음은 예제 뷰 파일입니다 (About.cshtml):

@{
    ViewData["Title"] = "About";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

<p>Use this area to provide additional information.</p>

뷰에서 Razor 코드는 @ 기호로 표시됩니다. 이 예제 뷰에서 볼 수 있는 것처럼, ViewData["Title"] 요소에 "About"이라는 문자열을 할당하고 있는 구문처럼, C# 구문은 중괄호({ })로 둘러싸인 Razor 코드 블럭 내부에서 실행됩니다. 그리고 <h2> 요소와 <h3> 요소에서 볼 수 있는 것처럼, 간단히 접두사로 @ 기호를 추가해서 값을 참조하는 것만으로도 Razor를 이용해서 HTML 내부에 값을 출력할 수 있습니다.

이 예제 뷰는 자신이 담당하는 영역을 출력하는 작업에만 집중하고 있습니다. 페이지의 레이아웃이나 그 밖에 뷰의 다른 공통적인 부분들은 다른 곳에서 지정됩니다. 레이아웃과 뷰 로직 공유에 관해서 더 자세한 내용을 살펴보시기 바랍니다.

컨트롤러에서 뷰를 지정하는 방법

일반적으로 뷰는 액션에서 ViewResult 개체로 반환됩니다. 액션 메서드에서 직접 ViewResult 개체를 생성하고 반환할 수도 있지만, 컨트롤러가 Controller 클래스를 상속받는 경우, 거의 대부분 다음 예제에서 볼 수 있는 것처럼 간단히 View 헬퍼 메서드를 사용하는 것이 일반적입니다:

HomeController.cs

public IActionResult About()
{
    ViewData["Message"] = "Your application description page.";

    return View();
}

이 코드에 사용된 View 헬퍼 메서드는 응용 프로그램 개발자가 손쉽게 뷰를 반환할 수 있도록 몇 가지 버전의 오버로드를 지원해줍니다. 필요한 경우 선택적으로 반환할 뷰를 지정할 수도 있고, 뷰에 모델 개체를 전달할 수도 있습니다.

이 액션 메서드가 반환되면 이전 절에서 살펴봤던 About.cshtml 뷰가 렌더됩니다:

뷰에 데이터 전달하기

몇 가지 메커니즘을 이용해서 뷰에 데이터를 전달할 수 있습니다. 가장 강력한 방법은 뷰에서 특정 모델 형식을 지정한 다음 (일반적으로 업무 도메인 모델 형식과 구분하기 위해서, 이런 용도의 모델을 뷰 모델이라고 부릅니다), 액션에서 해당 형식의 인스턴스를 뷰로 전달하는 것입니다. 대부분의 경우, 모델이나 뷰 모델을 이용해서 뷰에 데이터를 전달하는 것을 권장합니다. 이 방식을 사용하면 뷰에서 강력한 형식 검사의 이점을 얻을 수 있습니다. @model 지시문을 사용해서 뷰의 모델을 지정할 수 있습니다:

@model WebApplication1.ViewModels.Address
<h2>Contact</h2>
<address>
    @Model.Street<br />
    @Model.City, @Model.State @Model.PostalCode<br />
    <abbr title="Phone">P:</abbr>
    425.555.0100
</address>

이렇게 뷰에 모델을 지정하고 나면, 예제에서 볼 수 있는 것처럼 @Model을 이용해서 뷰에 전달된 인스턴스에 강력한 형식으로 접근할 수 있습니다. 모델 형식의 인스턴스를 뷰에 전달하기 위해서는 다음과 같이 컨트롤러에서 해당 인스턴스를 View 메서드에 매개변수로 전달해야 합니다:

public IActionResult Contact()
{
    ViewData["Message"] = "Your contact page.";

    var viewModel = new Address()
    {
        Name = "Microsoft",
        Street = "One Microsoft Way",
        City = "Redmond",
        State = "WA",
        PostalCode = "98052-6399"
    };
    return View(viewModel);
}

뷰에 모델로 제공될 수 있는 형식에는 어떠한 제한도 없습니다. 다만, 업무 로직은 응용 프로그램의 다른 곳에서 캡슐화할 수 있도록, 동작이 거의 혹은 전혀 존재하지 않는 POCO(Plain Old CLR Object) 뷰 모델을 전달하는 것이 바람직합니다. 다음은 이번 절의 예제에서 사용된 Address 뷰 모델을 POCO 방식으로 구현한 사례입니다:

namespace WebApplication1.ViewModels
{
    public class Address
    {
        public string Name { get; set; }
        public string Street { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string PostalCode { get; set; }
    }
}

public IActionResult SomeAction()
{
    ViewData["Greeting"] = "Hello";
    ViewData["Address"]  = new Address()
    {
        Name = "Steve",
        Street = "123 Main St",
        City = "Hudson",
        State = "OH",
        PostalCode = "44236"
    };

    return View();
}

@{
    // Requires cast
    var address = ViewData["Address"] as Address;
}

@ViewData["Greeting"] World!

<address>
    @address.Name<br />
    @address.Street<br />
    @address.City, @address.State @address.PostalCode
</address>

@ViewBag.Greeting World!

<address>
    @ViewBag.Address.Name<br />
    @ViewBag.Address.Street<br />
    @ViewBag.Address.City, @ViewBag.Address.State @ViewBag.Address.PostalCode
</address>

<address>
    @Model.Street<br />
    @Model.City, @Model.State @Model.PostalCode<br />
    <abbr title="Phone">P:</abbr>
    425.555.0100
</address>

뷰의 다른 기능들

태그 헬퍼(Tag Helpers)를 사용하면 뷰에서 사용자 지정 코드나 헬퍼를 사용하지 않고서도 손쉽게 기존 HTML 태그에 서버 측 동작을 추가할 수 있습니다. 태그 헬퍼는 HTML 요소에 어트리뷰트 형태로 적용되며 이를 인식하지 못하는 편집기에서는 단지 무시될 뿐이므로, 다양한 도구를 사용해서 뷰의 마크업을 편집하거나 렌더할 수 있습니다. 태그 헬퍼는 다양한 용도를 갖고 있지만, 특히 폼과 관련된 작업을 보다 손쉽게 만들어줍니다.

다양한 내장 HTML 헬퍼(HTML Helpers)를 이용해서 사용자 지정 HTML 마크업을 생성할 수 있으며, 보다 복잡한 UI 로직은 (자체적인 데이터 요구사항까지도) 뷰 구성 요소(View Components)로 캡슐화시킬 수 있습니다. 뷰 구성 요소는 컨트롤러나 뷰가 제공해주는 것과 동등한 관심사의 분리를 제공해주며, 공통 UI 요소에서 사용될 데이터를 처리하기 위해서 필요한 액션 및 뷰에 대한 요구를 줄여줍니다.

마지막으로 ASP.NET Core의 다른 많은 부분들처럼 뷰도 의존성 주입(Dependency Injection)을 지원하므로, 뷰에 서비스를 주입할 수도 있습니다.