Razor 구성 요소

8분

이제 개발 환경을 설정했으므로 Blazor 프로젝트의 구조를 살펴보고 Blazor 구성 요소의 작동 방식을 알아보겠습니다.

홈페이지

앱의 홈페이지는 구성 요소/페이지 디렉터리 내에 있는 Home.razor 파일로 정의됩니다. Home.razor 에는 다음 코드가 포함되어 있습니다.

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

맨 위에 있는 지시문은 @page 사용자가 앱의 루트로 이동할 때 구성 요소가 표시되도록 Home 이 페이지의 경로를 지정합니다. 태그는 PageTitle 브라우저 탭에 표시되도록 현재 페이지의 제목을 설정하는 Blazor 구성 요소입니다. 나머지 파일은 페이지의 콘텐츠를 정의하는 일반 HTML입니다.

Razor란?

Razor는 HTML 및 C#을 기반으로 하는 태그 구문입니다. Razor 파일(.razor)에는 조건부, 제어 흐름 및 식 평가와 같은 렌더링 논리를 정의하는 일반 HTML과 C#이 포함되어 있습니다. 그런 다음 Razor 파일은 구성 요소의 렌더링 논리를 캡슐화하는 C# 클래스로 컴파일됩니다.

Razor 구성 요소란?

Blazor 프로젝트에서 파일을 탐색하는 경우 프로젝트를 구성하는 대부분의 파일이 .razor 파일임을 확인할 수 있습니다. Blazor에서 Razor 파일은 앱 UI의 일부를 구성하는 재사용 가능한 구성 요소를 정의합니다. 구성 요소는 렌더링할 HTML 및 사용자 이벤트를 처리하는 방법을 정의합니다.

컴파일 시 각 Razor 구성 요소는 C# 클래스에 기본 제공됩니다. 클래스에는 상태, 렌더링 논리, 수명 주기 메서드 및 이벤트 처리기와 같은 일반적인 UI 요소가 포함될 수 있습니다. Razor에서 작성된 Blazor 구성 요소는 C# 클래스일 뿐이므로 구성 요소에서 임의의 .NET 코드를 사용할 수 있습니다.

구성 요소 사용

다른 구성 요소의 구성 요소를 사용하려면 구성 요소 이름과 일치하는 이름을 가진 HTML 스타일 태그를 추가합니다. 예를 들어 MyButton.razor라는 구성 요소가 있는 경우 태그를 MyButton 추가하여 구성 요소를 다른 구성 요소에 추가할 <MyButton /> 수 있습니다.

구성 요소 매개 변수

구성 요소에는 매개 변수가 있을 수도 있습니다. 이 매개 변수를 사용하면 사용할 때 구성 요소에 데이터를 전달할 수 있습니다. 구성 요소 매개 변수는 특성이 [Parameter] 있는 구성 요소에 공용 C# 속성을 추가하여 정의됩니다. 그런 다음 속성 이름과 일치하는 HTML 스타일 특성을 사용하여 구성 요소 매개 변수의 값을 지정할 수 있습니다. 매개 변수의 값은 C# 식일 수 있습니다.

@code 블록

@code Razor 파일의 블록은 C# 클래스 멤버(필드, 속성 및 메서드)를 구성 요소에 추가하는 데 사용됩니다. 구성 요소 상태를 추적하고, 구성 요소 매개 변수를 추가하고, 구성 요소 수명 주기 이벤트를 구현하고, 이벤트 처리기를 정의할 수 @code 있습니다.

카운터 사용해 보기

실행 중인 앱에서 왼쪽 사이드바에 있는 카운터 탭을 클릭하여 카운터 페이지로 이동합니다. 그러면 다음 페이지가 표시됩니다.

Counter Screenshot.

Click me 단추를 선택하여 페이지 새로 고침 없이 개수를 증분시킵니다. 웹 페이지에서 카운터를 증분시키려면 일반적으로 JavaScript를 작성해야 하지만, Blazor에서는 C#을 사용할 수 있습니다.

구성 요소의 Counter 구현은 Components/Pages/Counter.razor에서 찾을 수 있습니다.

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<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 구성 요소가 해당 콘텐츠를 렌더링합니다. 지시문은 @rendermode 구성 요소에 대한 대화형 서버 렌더링을 사용하도록 설정하므로 브라우저에서 사용자 인터페이스 이벤트를 처리할 수 있습니다.

Click me 단추를 선택할 때마다

onclick 이벤트가 발생합니다.
IncrementCount 메서드가 호출됩니다.
currentCount가 증가합니다.
업데이트된 개수를 표시하도록 구성 요소가 렌더링됩니다.

계속