Blazor 하이브리드의 Razor 구성 요소
이제 개발 환경 설정을 완료했으므로 Blazor 하이브리드 프로젝트 구조를 살펴보고 새 페이지를 추가하는 방법을 알아봅니다.
Razor란?
Razor는 웹 페이지에 .NET 기반 코드를 포함하는 태그 구문입니다. Razor 구문은 일반적으로 @ 문자로 시작하는 HTML, C# 및 Razor 특정 구문으로 구성됩니다. Razor를 포함하는 파일에는 일반적으로 .cshtml 파일 확장명(Razor Pages 및 MVC를 사용하여 서버 측 개발에 사용됨) 또는 Razor 구성 요소 파일에서 사용되는 .razor 확장명이 있습니다. Razor 구문은 다양한 JavaScript SPA(단일 페이지 애플리케이션) 프레임워크(예: Angular, React, VueJs 및 Svelte)의 템플릿 엔진과 비슷합니다.
Razor 구성 요소란?
Razor 구성 요소는 재사용 가능한 웹 UI 부분을 정의합니다. Blazor 구성 요소는 SPA 프레임워크의 React 및 Angular 구성 요소와 유사합니다.
프로젝트를 탐색하는 경우 .razor 파일에 정의된 다양한 Razor 구성 요소가 표시됩니다.
컴파일 시간에 각 Razor 구성 요소는 .NET 클래스로 빌드됩니다. 클래스에는 상태, 렌더링 논리, 수명 주기 메서드 및 이벤트 처리기와 같은 일반 UI 요소가 포함됩니다.
카운터 사용해 보기
실행 중인 앱에서 왼쪽 사이드바에 있는 카운터 탭을 선택하여 카운터 페이지로 이동합니다. 그러면 다음 페이지가 표시됩니다.
Click me 단추를 선택하여 페이지 새로 고침 없이 개수를 증분시킵니다. 웹 페이지에서 카운터를 증분시키려면 일반적으로 JavaScript를 작성해야 하지만, Blazor에서는 C#을 사용할 수 있습니다.
Pages/Counter에서 Counter 구성 요소의 구현을 찾을 수 있습니다.
@page "/counter"
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
맨 위에 있는 @page 지시문에 지정된 대로 브라우저에서 /counter를 요청하면 Counter 구성 요소가 해당 콘텐츠를 렌더링합니다.
Click me 단추를 선택할 때마다
onclick이벤트가 발생합니다.IncrementCount메서드가 호출됩니다.- 변수
currentCount변수가 증분됩니다. - 업데이트된 개수를 표시하도록 구성 요소가 렌더링됩니다.