Blazor를 사용하여 ASP.NET Core로 첫 웹앱을 빌드하세요.

Windows Linux macOS

구성 요소 수정

구성 요소 매개 변수는 특성 또는 자식 콘텐츠를 사용하여 지정되며, 이를 통해 하위 구성 요소에 대한 속성을 설정할 수 있습니다. Counter 구성 요소에 매개 변수를 정의하여 버튼을 클릭할 때마다 증가하는 양을 지정합니다.

  • [Parameter] 특성을 사용하여 IncrementAmount에 대한 공개 속성을 추가합니다.
  • currentCount 값을 증가시킬 때 IncrementAmount를 사용하도록 IncrementCount 메서드를 변경하세요.

다음 코드는 이를 달성하는 방법을 보여줍니다. 강조 표시된 선은 변경 내용을 보여줍니다.

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;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

    private void IncrementCount()
    {
        currentCount += IncrementAmount;
    }
}

Home.razor에서 <Counter> 요소를 업데이트하여 다음 코드의 강조 표시된 줄에 표시된 것처럼 증분량을 10으로 변경하는 IncrementAmount 특성을 추가합니다.

Components/Pages/Home.razor
@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter IncrementAmount="10" />

핫 다시 로드 버튼을 클릭하여 앱에 변경 내용을 적용합니다. Home 구성 요소에는 다음 이미지와 같이 Click me 버튼이 선택될 때마다 10씩 증가하는 자체 카운터가 있습니다. /counter의 Counter 구성 요소(Counter.razor)는 계속 1씩 증가합니다.

Home 구성 요소에는 다음 이미지와 같이 Click me 버튼이 선택될 때마다 10씩 증가하는 자체 카운터가 있습니다. /counter의 Counter 구성 요소(Counter.razor)는 계속 1씩 증가합니다.

이제 홈페이지에는 40에서 카운터를 표시하는 10씩 증가하는 카운터가 포함됩니다.

계속