- Blazor는 component 기반 프레임워크입니다. 즉, 구성 요소는 Blazor 애플리케이션의 기본구성요소입니다.
- 중첩, 재사용이 가능하며 제대로 구현된 경우 여러 프로젝트에서 공유할 수도 있습니다.
- 구성 요소 파일의 확장자는 .razor입니다.
razor components 예제
다음은 새 Blazor 프로젝트를 만들 때 얻는 Counter 구성 요소입니다.
Counter.razor
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code
{
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
- C# 코드는 버튼을 클릭할 때마다 currentCount 변수 값을 1씩 증가시킵니다.
- 버튼을 클릭하면 IncrementCount() 함수를 호출해야 합니다. 이것은 onclick 속성을 사용하여 연결됩니다 .
- HTML에서 개인 변수 currentCount 값에 액세스하려면 @ 문자를 사용하십시오.
- C# 코드는 @code 블록 에 있습니다 . 둘 이상의 @code 블록을 가질 수도 있습니다.
애플리케이션이 컴파일되면 HTML 및 C# 코드가 구성 요소 클래스로 변환됩니다. 생성된 클래스의 이름은 구성 요소 파일의 이름과 일치합니다. 구성 요소 파일 이름은 대문자로 시작해야 합니다. 소문자로 시작하는 구성 요소 파일을 추가하면 코드가 컴파일되지 않고 다음 컴파일러 오류가 발생합니다.
* 구성 요소 이름은 소문자로 시작할 수 없습니다.
blazor 서버 프로젝트는 서버에서 실행됩니다.
- 서버와 클라이언트 브라우저 간에 SignalR 연결이 설정됩니다. 카운터 구성 요소가 처음 렌더링된 후와 사용자가 버튼을 클릭할 때.
- 클릭 이벤트에 대한 정보는 SignalR 연결을 통해 서버로 전송됩니다.
- 이벤트에 대한 응답으로 구성 요소가 다시 생성되지만 전체 HTML이 클라이언트로 다시 전송되지는 않습니다. 차이, 즉 렌더 트리의 차이, 이 경우 클라이언트 브라우저로 전송되는 새 카운터 값입니다.
- 전체 페이지를 새로고침하고 업데이트하는 대신 페이지의 변경된 부분만 업데이트하기 때문에 응용 프로그램이 사용자에게 더 빠르고 반응이 좋게 느껴집니다.
component 를 배치할 위치
구성 요소는 blazor 프로젝트 내의 아무 곳에나 배치할 수 있습니다. Pages 폴더에 웹 페이지를 생성하는 구성 요소를 배치하고 Shared 폴더 에 재사용 가능한 비페이지 구성 요소를 배치하는 것이 좋습니다 . 원하는 경우 프로젝트 내의 완전히 다른 사용자 지정 폴더에 배치할 수도 있습니다.
Split component HTML and C# code
이 예에서는 HTML과 C#이 모두 단일 파일에 있습니다. 이 counter 와 같은 간단한 구성 요소에는 적합 하지만 일반적으로 HTML 및 C# 코드를 자체 파일로 분리하는 것이 좋습니다. 유지 관리 측면에서 좋을 뿐만 아니라 단위 테스트도 쉽습니다. 구성 요소 HTML 및 C# 코드를 별도의 파일로 분할하는 두 가지 방법이 있습니다.
- 부분 파일 접근법
- 기본 클래스 접근 방식