이전

다음

Blazor 구성 요소를 사용하여 사용자 인터페이스 만들기

완료됨

Blazor 구성 요소를 사용하면 .NET 코드를 사용하여 동적 콘텐츠가 포함된 HTML의 웹 페이지 또는 일부를 정의할 수 있습니다. Blazor에서는 JavaScript를 사용하는 대신 C#을 사용하여 동적 콘텐츠를 작성할 수 있습니다.

피자 배달 회사에서 새로운 최신 웹 사이트를 만들기 위해 작업하고 있다고 가정합니다. 사이트 사용자 대부분의 방문 페이지가 될 시작 페이지부터 시작합니다. 해당 페이지에 특별 제안 및 인기 있는 피자를 표시하려고 합니다.

이 단원에서는 Blazor에서 구성 요소를 만들고 해당 구성 요소에 동적 콘텐츠를 렌더링하는 코드를 작성하는 방법을 알아봅니다.

Blazor 구성 요소 이해

Blazor는 개발자가 C# 코드를 작성하여 풍부한 대화형 UI(사용자 인터페이스)를 만드는 데 사용할 수 있는 프레임워크입니다. Blazor를 사용하면 서버 쪽과 클라이언트 쪽 모두에서 모든 코드에 동일한 언어를 사용하고 모바일 디바이스의 브라우저를 포함하여 다양한 브라우저에 표시하기 위해 렌더링할 수 있습니다.

참고

Blazor 앱에는 두 가지 코드 호스팅 모델이 있습니다.

• Blazor Server: 이 모델에서 앱은 ASP.NET Core 앱 내의 웹 서버에서 실행됩니다. 클라이언트 쪽의 UI 업데이트, 이벤트 및 JavaScript 호출은 클라이언트와 서버 간의 SignalR 연결을 통해 전송됩니다. 이 모듈에서는 이 모델에 대해 설명하고 코딩합니다.
• Blazor WebAssembly: 이 모델에서는 Blazor 앱, 해당 종속성 및 .NET 런타임이 다운로드되어 브라우저에서 실행됩니다.

Blazor에서는 “구성 요소”라고 하는 코드의 자체 포함 부분에서 UI를 빌드합니다. 각 구성 요소는 HTML 및 C# 코드가 혼합되어 있을 수 있습니다. 구성 요소는 코드가 @code 지시문으로 표시되는 Razor 구문을 사용하여 작성됩니다. 다른 지시문을 사용하여 변수에 액세스하고, 값에 바인딩하고, 다른 렌더링 작업을 수행할 수 있습니다. 앱이 컴파일되면 HTML 및 코드가 구성 요소 클래스로 컴파일됩니다. 구성 요소는 .razor 확장명의 파일로 작성됩니다.

참고

Razor 구문은 .NET 코드를 웹 페이지에 포함시키는 데 사용됩니다. 파일 확장명이 .cshtml인 ASP.NET MVC 애플리케이션에서 이 구문을 사용할 수 있습니다. Razor 구문은 Blazor에서 구성 요소를 작성하는 데 사용됩니다. 이러한 구성 요소에는 대신 .razor 확장자가 있으며 컨트롤러와 보기가 엄격하게 구분되지 않습니다.

Blazor 구성 요소의 간단한 예제는 다음과 같습니다.

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them blazing fast!";
}

이 예제에서 코드는 welcomeMessage라는 문자열 변수의 값을 설정합니다. 이 변수는 HTML의 <p> 태그 내에서 렌더링됩니다. 이 단원의 뒷부분에서 더 복잡한 예제를 살펴보겠습니다.

Blazor 구성 요소 만들기

Blazor 앱을 만들 때 dotnet CLI(명령줄 인터페이스)에서 blazorserver 템플릿을 사용하면 기본적으로 다음과 같은 몇 가지 구성 요소가 포함됩니다.

dotnet new blazorserver -o BlazingPizzaSite -f net6.0

기본 구성 요소에는 Index.razor 홈페이지와 Counter.razor 데모 구성 요소가 포함됩니다. 이 두 구성 요소는 모두 Pages 폴더에 있습니다. 필요에 맞게 이러한 보기를 수정 또는 삭제하고 새 구성 요소로 바꿀 수 있습니다.

기존 웹앱에 새 구성 요소를 추가하려면 다음 명령을 사용합니다.

dotnet new razorcomponent -n PizzaBrowser -o Pages -f net6.0

• -n 옵션은 추가할 구성 요소의 이름을 지정합니다. 이 예제에서는 PizzaBrowser.razor라는 새 파일을 추가합니다.
• -o 옵션은 새 구성 요소가 포함될 폴더를 지정합니다.
• -f 옵션은 강제로 프레임워크 버전 .NET 6을 사용하여 애플리케이션을 빌드합니다.

중요

Blazor 구성 요소의 이름은 대문자로 시작해야 합니다.

구성 요소를 만든 후에는 Visual Studio Code에서 구성 요소를 열어 편집할 수 있습니다.

code Pages/PizzaBrowser

Blazor 구성 요소에서 코드 작성

Blazor에서 UI를 빌드할 때 흔히 동일한 파일에 있는 정적 HTML 및 CSS 태그를 C# 코드와 혼합합니다. 이러한 코드 형식을 구분하기 위해 Razor 구문을 사용합니다. Razor 구문에는 C# 코드, 라우팅 매개 변수, 바인딩된 데이터, 가져온 클래스 및 기타 기능을 구분하는, @ 기호가 접두사로 추가된 지시문이 포함됩니다.

다음 예제 구성 요소를 다시 살펴보겠습니다.

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them fast!";
}

<h1> 및 <p> 태그를 통해 HTML 태그를 알아볼 수 있습니다. 이 태그는 코드가 동적 콘텐츠를 삽입하는 페이지의 정적 프레임워크입니다. Razor 태그는 다음으로 구성됩니다.

• @page 지시문: 이 지시문은 Blazor에 경로 템플릿을 제공합니다. 런타임에 Blazor는 이 템플릿을 사용자가 요청한 URL과 일치시켜 렌더링할 페이지를 찾습니다. 이 경우 http://yourdomain.com/index 양식의 URL과 일치시킬 수 있습니다.
• @code 지시문: 이 지시문은 다음 블록의 텍스트가 C# 코드임을 선언합니다. 구성 요소에 필요한 만큼 코드 블록을 포함할 수 있습니다. 이러한 코드 블록에서 구성 요소 클래스 멤버를 정의하고 계산, 데이터 조회 작업 또는 기타 소스에서 해당 값을 설정할 수 있습니다. 이 경우 코드는 welcomeMessage라는 단일 구성 요소 멤버를 정의하고 해당 문자열 값을 설정합니다.
• 멤버 액세스 지시문: 렌더링 논리에 멤버의 값을 포함하려면 @ 기호 뒤에 멤버 이름 같은 C# 식을 사용합니다. 여기서는 @welcomeMessage 지시문이 <p> 태그에서 welcomeMessage 멤버의 값을 렌더링하는 데 사용됩니다.

계속