[MVC3 뒷북치기-2] 레이저 그 심플함이란

Posted by 미나빠!
2011.04.19 14:00 .NET/MVC 3 뒷북치기


안녕하세요. 이번 시간은 MVC 3에 가볍게 추가된 레이저(Razor)에 대해 알아보겠습니다.

간단(?)하니까요. ~짝 살펴볼까요?

 

먼저 레이저 면상은?

 

모두 ASP.NET MVC 3 가 준비되셨나요? 아직도 되어있지 않다면 설치부터 하세요!

, 새 프로젝트를 열도록 하겠습니다.


웹 템플릿에서 ASP.NET MVC 3 Web Application 을 선택 한 후, RazorSample 을 입력하고 확인버튼을 클릭합니다.


MVC 2 에서는 새 프로젝트 생성 화면에서 빈 프로젝트와 하나의 어플리케이션이 기본적으로 만들어져 있는 프로젝트를 선택하였는데요, 버전 3에서는 위 화면에서 선택하네요.

물론 단위 테스트 프로젝트 생성 여부도 같이 선택할 수 있습니다. 지금은 Empty 프로젝트로 생성한 후 진행하도록 하겠습니다. 완료가 되면, 다음과 같은 프로젝트 구조를 볼 수 있습니다.


새로운 확장자
cshtml과 새로운 파일 _ViewStart.cshtml, _Layout.cshtml 이 있습니다. cshtml razor 페이지의 확장자입니다. 새로운 두 파일은 마스터페이지라고 보시면 됩니다.
이 외에는 정말 아무것도 없네요. 우선 컨트롤러를 생성해보도록 하겠습니다. Home 컨트롤러를 생성해 보죠.
그리고 Index 액션메쏘드를 수정합니다.

public class HomeController : Controller

{

    //

    // GET: /Home/

    public ActionResult Index()

    {

        ViewBag.Message = "ASP.NET MVC 3 뒷북시리즈입니다.";

        return View();

    }

}


ViewBag
이 보입니다. 이는 MVC 2 에서 소개되었던 ViewData 딕셔너리와 같은 역할을 합니다.
MVC 2 에서는 위와 동일한 메시지를 전달하기 위해 다음과 같은 코드를 사용했죠.

ViewData[“Message”] = “ASP.NET MVC 3 뒷북시리즈입니다.”;

이를 통해 뷰 페이지에 데이터를 전달해주는 것입니다. 그렇다면 이 ViewBag 에서 다른 점은 무엇이냐? 데이터타입이 다이나믹이라는 것입니다. 그렇다면 다이나믹이라는 것은 또 무엇이냐? 사용하다보면 알게됩니다^^; 일단은 컴파일 시점에 타입을 체크하는 것이 아니라 런타임시에 체크를 한다는 것이라고만 알고 넘어가죠. 말이 더 어렵죠?

이번에 ViewBag 이라는 이름 참 잘 지은 것 같습니다. 가방이죠. 뭔가를 넣겠다는 것이죠. 그냥 담고 싶은 것 이것저것 다 넣으세요. 허락할게요. 한번 넣어볼까요?

ViewBag.Message = "ASP.NET MVC 3 뒷북시리즈입니다.";
ViewBag.time = DateTime.Now;
ViewBag.numbers = new int[] {1,2,3,4,5,6,7,8,9,0};

컴파일에는 아무 문제가 없습니다. 런타임시에 해당 속성들만 존재하면 됩니다. 간단하죠?

이제 뷰 페이지를 만들어보겠습니다. 이것 역시 간단합니다. 만들 뷰 페이지와 매치되는 액션메쏘드에서 마우스 우클릭하여 Add View 하시면 됩니다. 참 쉽죠잉~


기존과 달라진 점이라면 뷰 엔진을 선택할 수 있다는 것이네요
. 그리고, 밑줄이 있는 메시지를 보면 그냥 공란으로 남겨둘 경우 _viewstart 파일을 사용한다네요. 새로운 파일 중 한가지가 여기서 보이네요. 나머지 _Layout.cshtml 파일은 _ViewStart.cshtml 파일을 열어보면, 확인할 수 있습니다.

@{

Layout = "~/Views/Shared/_Layout.cshtml";

}


이제는
Index.cshtml 파일을 수정할 차례입니다.

@{

ViewBag.Title = "Index";

}

<h2>Index</h2>

<div>메시지: @ViewBag.Message</div>

<div>현재시간: @ViewBag.time</div>

<ul>

@foreach (int num in ViewBag.numbers)

{

<li>@num</li>

}

</ul>


@
<== 이것이 razor 문법의 핵심입니다. 예전 인라인 코드를 한결 깔끔하게 처리해주었습니다.

정말 점점 코드가 간결해지는 것 같습니다. 처음에는 <%= Html.Encode(ViewData[“Message”])%> 이랬던 코드가 <%: ViewData[“Message”]%> 와 같이 바뀌더니, 지금 Razor뷰엔진을 통해서는 @ViewBag.Message 와 같이 간결해졌습니다.

@{} 는 이 괄호 안에 razor 코드를 쓰면 되는 거겠죠? ViewBag.Title 은 페이지의 타이틀을 의미합니다. 레이아웃 페이지를 보면 <head> 태그 안의 <title>에서 이를 입력하는 것을 확인할 수 있습니다. 나머지들도 보기에 불편함이 없으실 듯 합니다.

아래는 기존 코드방법과 레이저의 차이입니다.

<ul>

<% foreach (int num in ViewBag.numbers) { %>

<li><%: num %></li>

<% } %>

</ul>

è

<ul>

@foreach (int num in ViewBag.numbers)

{

<li>@num</li>

}

</ul>


조금 간단해진 것처럼 보이시나요
?
이제 여기서 if 문을 통해 홀수와 짝수를 구분해 보도록 하겠습니다.

@{

ViewBag.Title = "Index";

}

<h2>Index</h2>

<div>메시지: @ViewBag.Message</div>

<div>현재시간 : @ViewBag.time</div>

<ul>

@foreach (int num in ViewBag.numbers)

{

    if (num % 2 == 0)

    {

        <li>짝수 : @num</li>

    }

    else

    {

        <li>홀수 : @num</li>

    }

}

</ul>


간단하죠
? 보기에 불편함이 있으셔도 계속 레이저와의 만남을 갖게 되면 익숙해질 것입니다.
실행된 화면도 한번 살펴봐야겠죠?


어떠셨나요
? 별거(?) 없죠?
다음 시간은 위에서 잠깐 살펴본 레이아웃 페이지에 대해 알아보도록 하겠습니다.

신고
이 댓글을 비밀 댓글로

티스토리 툴바