ASP.NET에서 **레이저(Razor)**는 주로 웹 애플리케이션 개발을 위해 사용되는 뷰 엔진입니다. 레이저는 C# 및 HTML을 결합하여 동적 웹 페이지를 생성하는데 최적화된 템플릿 마크업 구문을 제공합니다. ASP.NET Core에서는 Razor를 사용하여 서버 사이드 웹 페이지와 구성 요소를 개발할 수 있습니다.
## 레이저(Razor) 개요
### 1. 레이저의 특징
- **간결한 구문:** HTML과 C# 코드를 자연스럽게 통합할 수 있도록 설계되었습니다. Razor는 문법적으로 간결하고 사용이 쉽습니다.
- **서버 사이드 렌더링:** Razor 페이지와 뷰는 서버에서 실행되어 HTML을 생성하고, 이 HTML이 클라이언트에 전송됩니다.
- **코드 블록 통합:** Razor는 C# 코드 블록을 지원하여 복잡한 로직을 구현할 수 있습니다.
- **레이아웃과 파셜 뷰 지원:** 페이지의 일관성을 유지하면서 코드 중복을 줄일 수 있는 기능을 제공합니다.
- **서버 기반과 클라이언트 기반 모두 지원:** ASP.NET Core에서는 서버에서 Razor Pages를 사용하고, 클라이언트 측에서는 Blazor를 사용하여 대화형 웹 애플리케이션을 개발할 수 있습니다.
### 2. Razor 구문
Razor의 구문은 일반적으로 `@` 기호를 사용하여 HTML과 C# 코드를 구분합니다. 다음은 Razor 구문의 몇 가지 예입니다.
#### 기본 구문
```razor
@{
var message = "Hello, World!";
}
<h1>@message</h1>
```
- `@{ ... }`: C# 코드를 포함하는 코드 블록입니다.
- `@message`: C# 변수 또는 식을 HTML에 삽입합니다.
#### 조건문 및 반복문
```razor
@for (int i = 0; i < 5; i++)
{
<p>Number: @i</p>
}
@if (DateTime.Now.Hour < 12)
{
<p>Good morning!</p>
}
else
{
<p>Good afternoon!</p>
}
```
- `@for`, `@if`: C# 제어 구조를 사용할 수 있습니다.
### 3. Razor Pages
**Razor Pages**는 ASP.NET Core에서 페이지 중심의 웹 애플리케이션 개발을 쉽게 만드는 웹 프레임워크입니다. MVC 패턴의 대체로 간단한 페이지 기반의 애플리케이션을 개발할 때 유용합니다.
#### Razor Page 파일 구조
Razor Page는 `.cshtml` 확장자를 가진 파일로 작성됩니다. 보통 이 파일은 페이지와 관련된 C# 코드를 포함하는 `PageModel` 클래스를 함께 사용합니다.
- **Example.cshtml**
```razor
@page
@model ExampleModel
<h2>Welcome to Razor Pages!</h2>
<p>Message: @Model.Message</p>
```
- **Example.cshtml.cs**
```csharp
using Microsoft.AspNetCore.Mvc.RazorPages;
public class ExampleModel : PageModel
{
public string Message { get; private set; }
public void OnGet()
{
Message = "Hello from the server!";
}
}
```
- `@page`: 이 디렉티브는 파일이 Razor Page임을 지정합니다.
- `@model`: 페이지의 PageModel 클래스를 지정합니다.
- `OnGet()`: GET 요청에 대한 핸들러 메서드입니다.
### 4. Razor Components (Blazor)
Razor를 사용한 또 다른 접근 방식은 **Blazor**를 통해 클라이언트 측 웹 애플리케이션을 개발하는 것입니다. Blazor는 .NET으로 대화형 웹 UI를 구축할 수 있는 프레임워크입니다.
#### Blazor 구성 요소
Blazor에서는 Razor를 사용하여 재사용 가능한 UI 구성 요소를 정의합니다.
- **Counter.razor**
```razor
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
```
- `@page`: 구성 요소에 라우팅 경로를 지정합니다.
- `@onclick`: Blazor의 이벤트 바인딩을 통해 버튼 클릭 시 C# 메서드를 호출합니다.
- `@code`: 구성 요소의 C# 코드를 포함합니다.
### 5. 레이아웃 및 파셜 뷰
Razor를 사용하면 사이트 전체에 걸쳐 공통된 레이아웃을 정의할 수 있습니다. 또한, 파셜 뷰를 사용하여 뷰의 일부를 재사용 가능하게 만들 수 있습니다.
#### 레이아웃 예제
- **_Layout.cshtml**
```razor
<!DOCTYPE html>
<html>
<head>
<title>@ViewData["Title"]</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<main>
@RenderBody()
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
```
- **Index.cshtml**
```razor
@page
@{
ViewData["Title"] = "Home";
}
<h2>Welcome to my website!</h2>
```
- `@RenderBody()`: 현재 뷰의 콘텐츠를 렌더링하는 위치를 지정합니다.
#### 파셜 뷰 예제
- **_PartialView.cshtml**
```razor
<div>
<h3>Partial View Example</h3>
<p>This is a partial view.</p>
</div>
```
- **Index.cshtml에서 파셜 뷰 사용**
```razor
@page
@await Html.PartialAsync("_PartialView")
```
- `@Html.PartialAsync()`: 파셜 뷰를 비동기적으로 렌더링합니다.
## 결론
Razor는 ASP.NET에서 웹 애플리케이션 개발을 위한 강력하고 유연한 템플릿 엔진입니다. Razor Pages는 간단한 페이지 기반 애플리케이션을 쉽게 개발할 수 있게 하고, Blazor는 클라이언트 측 웹 애플리케이션 개발을 지원합니다. Razor를 사용하면 C#과 HTML을 손쉽게 통합하여 동적이고 대화형 웹 페이지를 작성할 수 있습니다.
'Software > C#' 카테고리의 다른 글
| C# 시작하기 - MAUI 소개 (0) | 2024.07.28 |
|---|---|
| ASP.NET 시작하기 - 템플릿 엔진 (0) | 2024.07.28 |
| ASP.NET 시작하기 - 패키지 관리 (0) | 2024.07.28 |
| ASP.NET Core 시작하기 - REST API (0) | 2024.07.27 |
| VSCode에서 C# 시작하기 - MySQL 연결하기 (0) | 2024.05.24 |