[Blazor] 리터럴, 표현식 및 지시문

참고

• https://blazor-university.com/components/literals-expressions-and-directives/

개요

• 구성 요소를 사용할 때 정보를 매개 변수로 전달 할 수 있습니다.
• 이러한 매개변수는 정수, 문자열, 불리안 과 같은 단순 유형이거나 Func, 작업 또는 복합 객체의 인스턴스와 같은 복합 유형일 수 있습니다. HTML 속성과 달리 일반 HTML 파일에서 값으로 나타낼 수 있는 값으로 제한되지 않습니다.
• Blazor가 구성 요소에 전달한 값을 해석하는 방법은 설정하는 유형 과 기호 [Parameter]를 사용하여 의도를 명시했는지 여부 에 따라 다릅니다.
• name=value 매개변수는 HTML 마크업에서와 마찬가지로 형식을 사용하여 할당 됩니다. 값, 지시문(특수 경우) 또는 리터럴을 결정하기 위해 표현식을 사용하는지 여부는 @기호의 위치(또는 부재)에 따라 다릅니다.

Position	Type	Example
Absent	Literal	<MyComponent MyParameter=42>
Right	Expression	<MyComponent Value=@SomeValue/>
Left	Directive	<MyComponent @Bind-value=SomeValue/>

• HTML 마크업과 마찬가지로 Blazor 마크업을 사용하면 값을 따옴표로 묶을지 여부를 선택할 수 있습니다. 다음은 동등합니다.

<MyComponent Value=@SomeValue/>
<MyComponent Value="@SomeValue"/>

• 리터럴 문자열을 전달할 때만 매개변수 값을 따옴표로 묶는 것을 추천합니다.

리터럴

• HTML 속성에 전달된 모든 값(@가 붙지 않음)은 리터럴 값으로 간주됩니다.
• Blazor 구성 요소의 [Parameter] 데코레이트된 속성에 값을 전달할 때 항상 그런 것은 아니지만 대부분의 경우 이 규칙이 적용됩니다.

Type	Razor view	HTML
HTML attribute	<input size=-8/>	<input size="8">
Component parameter	<MyHeader Text="Hello" Visible=true/>	<h1>Hello</h1>

• MyHeader 는 다음과 같이 정의 되었습니다.

@if (Visible)
{
  <h1>@Text</h1>
}


@code
{
  [Parameter]
  public bool Visible { get; set; } = true;

  [Parameter]
  public string Text { get; set; }
}

표현식

• 고정된 리터럴 값이 아닌 동적 값을 포함하는 HTML을 렌더링해야 할 때 표현식을 사용해야 합니다.
• 할당한 값 앞에 @ 기호를 추가하여 표현식을 사용하고 있음을 Blazor 에게 알립니다.
• 그러면 Blazor 는 @ 멤버 이름 또는 메서드 호출과 같은 유효한 C# 코드 조각으로 뒤의 텍스트를 해석하려고 시도합니다.
• 아래와 같이 C# 코드가 있습니다.

int InputSize = 8;
bool HeaderVisible = true;
string HeaderText = "Value of variable";

private int DoubleInputSize()
{
  return InputSize \* 2;
}

• 위 코드는 다음과 같이 표현할 수 있습니다.

Razor view	HTML
<input value=@InputSize/>	<input value=8>
<input value=@DoubleInputSize()/>	<input value="16"/>
<MyHeader Text=@HeaderText Visible=@HeaderVisible/>	<h1>Value of variable>/h1>

• 표현식 텍스트를 괄호로 묶어 문자열 보간 및/또는 계산된 값과 같은 더 복잡한 표현식을 전달할 수도 있습니다.

Razor view	HTML
<input size=@(InputSize * 3) />	<input size="24"/>
<input value=@($"Size is {InputSize}")/>	<input value="Size is 8"/>
<input value=@($"Size is {DoubleInputSize()}")/>	<input size="Size is 16"/>

복합 유형으로 평가되는 표현식

• 복합 형식은 HTML 특성과 Blazor 구성 요소의 속성 모두에 매개 변수 값으로 전달할 수도 있습니다.
• 다음 Person클래스를 예로 들어 보겠습니다.

public class Person
{
  public string Salutation { get; set; }
  public string GivenName { get; set; }
  public string FamilyName { get; set; }

  public override string ToString() => $"{Salutation} {GivenName} {FamilyName}";
}

• 보기 중 하나에서 인스턴스를 만드는 경우 Person 해당 인스턴스를 표준 HTML 특성에 값으로 전달할 수 있으며 Blazor 는 재정의된 ToString() 메서드를 사용하여 값을 나타냅니다.

<div class="row">
  <div class="col-4">To HTML attribute using .ToString()</div>
  <div class="col-8"><input readonly value=@MyPerson /></div>
</div>

@code
{
  Person MyPerson;

  protected override void OnInitialized()
  {
    base.OnInitialized();
    MyPerson = new Person
    {
      Salutation = "Mr",
      GivenName = "Peter",
      FamilyName = "Morris"
    };
  }
}

• Blazor 에서 다른 구성 요소를 참조하여 개체를 전달한다는 것을 증명하려면 Person 객체에 [Parameter] attribute 를 지정하면 됩니다.

<div class="row">
  <div class="col-2">Salutation</div>
  <div class="col-10">@Person?.Salutation</div>
</div>
<div class="row">
  <div class="col-2">Given name</div>
  <div class="col-10">@Person?.GivenName</div>
</div><div class="row">
  <div class="col-2">Family name</div>
  <div class="col-10">@Person?.FamilyName</div>
</div>
@code
{
  [Parameter]
  public Person Person { get; set; }
}