헬로 월드 - 어떻게 작동하나요?

실험적 모바일 Blazor 바인딩을 사용하는 방법에 대해 자세히 알아보려면 이전 연습에서 만든 초기 프로젝트를 살펴보겠습니다.

살펴볼 기본 프로젝트는 파일이 포함된 공유 프로젝트입니다.razor. Android 및 iOS 프로젝트에는 실험적 모바일 Blazor 바인딩과 관련된 코드가 포함되어 있지 않습니다.

다음은 공유 프로젝트의 파일입니다.

• _Imports.razor - 이 폴더의 다른 .razor 모든 파일과 해당 하위 폴더에 적용되는 일반적인 지시문을 포함합니다. 하위 폴더에는 추가 지시문이 있는 자체 _Imports.razor 파일이 있을 수 있습니다. 이 파일에서 가장 일반적인 지시문 형식은 @using C# using 문과 정확히 동일한 파일로 .razor 네임스페이스를 가져오는 데 사용되는 지시문입니다.
• App.cs- 기본 클래스에서 Xamarin.Forms.Application 파생되는 클래스로 표현되는 애플리케이션의 기본 UI 진입점을 포함합니다. 이 클래스의 생성자는 제네릭 호스트를 인스턴스화하고 호스트에 서비스를 추가한 다음(기본 프로젝트에 없음), 호스트를 사용하여 라는 HelloWorld Blazor 구성 요소를 애플리케이션 요소(this)에 추가합니다.
• Counter.razor - 라는 CounterBlazor 구성 요소를 포함합니다.
• HelloWorld.razor - 라는 HelloWorldBlazor 구성 요소를 포함합니다.

두 Blazor 구성 요소의 작동 방식을 알아보겠습니다.

카운터 Blazor 구성 요소

이 구성 요소에는 다음 두 개의 섹션이 포함되어 있습니다.

1. UI 요소와 관련 속성 및 이벤트 처리기를 정의하는 태그입니다.

   <Frame CornerRadius="10" BackgroundColor="Color.LightBlue">
   
       <StackLayout Orientation="StackOrientation.Horizontal" HorizontalOptions="LayoutOptions.Center">
   
           <Button Text="Increment" OnClick="IncrementCount" />
   
           <Label Text="@("The button was clicked " + count + " times")"
               FontAttributes="FontAttributes.Bold"
               VerticalTextAlignment="TextAlignment.Center" />
   
       </StackLayout>
   
   </Frame>
   

   HTML과 유사한 태그는 Xamarin.Forms 구성 요소와 해당 속성 및 이벤트와 일치하는 UI 구성 요소를 나타냅니다. 일부 속성에는 식 블록으로 표시되는 C# 코드로 계산된 값으로 설정된 구성 요소의 Text 속성과 같은 Label 계산 값이 @( ... ) 있습니다.

   구성 요소의 OnClick 이벤트와 같은 Button 이벤트 처리기가 실행되면 구성 요소가 자동으로 다시 렌더링되어 추가 논리 없이 UI를 업데이트할 수 있습니다. 고급 시나리오는 다시 렌더링되는 구성 요소와 시기를 제어할 수 있습니다.

2. 블록에 래핑된 이벤트 처리기 또는 기타 구성 요소 기능을 구현하는 @code { ... } 코드:

   int count;
   
   void IncrementCount()
   {
       count++;
   }
   

   이 코드는 구성 요소 Text 속성의 Label 계산 값으로도 사용되는 필드를 증가합니다count. IncrementCount() 이벤트 처리기를 실행한 후 UI가 다시 렌더링될 때 의 count 새 값이 사용됩니다.

HelloWorld Blazor 구성 요소

HelloWorld 구성 요소에는 태그만 포함됩니다.

<ContentView>
    <StackLayout Margin="new Thickness(20)">

        <Label Text="Hello, World!"
               FontSize="40" />

        <Counter />

    </StackLayout>
</ContentView>

Counter 구성 요소는 태그<Counter />로 참조하여 이 구성 요소에서 참조됩니다.

모든 Blazor 구성 요소는 파일과 동일한 이름의 클래스로 컴파일됩니다. 네임스페이스는 프로젝트의 루트 네임스페이스이며 폴더 이름(있는 경우)을 점(.)으로 구분합니다. 형식 이름(일반적이지 않음)을 통해 다른 C# 코드에서 또는 태그로 사용하여 파일에서 .razor 형식을 참조할 수 있습니다.