레이저 문법 고수를 찾습니다.

🧵 Slog
1

image

제공된 문자열이나, 대리자 값으로 @onclick 특성을 설정한다.
대리지 값은 ‘MouseEventArgs’ 형식이어야 한다

아래 보기 코드를 참고하여,

<div @onclick="[코드]">Hello world!</div>

@code {
   private void OnClicked() { }
}

[코드] 자리에 들어갈 것으로 알맞지 않은 것을 모두 고르시오. (.net 7.0 기준)

  1. @OnClicked
  2. OnClicked
  3. OnClicked( )
  4. @( ) => OnClicked( )
  5. @(( ) => OnClicked( ))
  6. ( ) => OnClicked( )
  7. _ => OnClicked( )
  8. e => OnClicked( )
  9. (e) => OnClicked( )
  10. (MouseEventArgs e) => OnClicked( )
  11. @( e => OnClicked( ))
  12. @( (MouseEventArgs e) => OnClicked( ))

실행 환경에서 테스트 해보지 않고, 정답을 맞추시는 분은 진정한 고수이십니다.

1개의 좋아요
2

[힌트]

EventCallback<T> 는 EventCallback 의 파생 객체입니다.

EventCallback 은 Action 시그니쳐와 동일합니다.
EventCallback<T> 는 Action<T> 시그니쳐와 동일합니다.

1개의 좋아요
3

제가 레이저 문법 고수는 아니지만 대략 느낌적인 느낌으로 봤을때 1,2,5,11,12 말곤 다 문법오류가 아닐까 싶습니다…ㅎㅎ

2개의 좋아요
4

()=>method() 이걸로 다해결해와서 근데 개인적으로 저렇게 방법이 다양한것도 문제인것 같네요

2개의 좋아요
5

이 사이트는 댓글을 작성하는 창이 위로 겹쳐서 떠서 문제의 보기 12개를 보면서 댓글 작성이 되네요. :+1:

될 거 같은거 : 5, 11, 12
안 될 거 같은거 : 위 셋을 제외한 모두

2개의 좋아요
6

정답 및 해설

요소의 attribute 값은 문자열로 표현합니다.

블레이저 파서는 아래의 두 가지 원칙이 있습니다.

@

바로 뒤의 문자열을 C# 코드의 식별자(변수 이름, 메서드 이름, 클래스 이름 등)로 바라봅니다.

@()

괄호 안에는 기본적으로 @과 같고, 여기에 표현식(expression)을 넣을 수 있습니다.
그러나, 괄호 이후는 문자열로 봅니다. 4번 예시에서,

  1. @( ) => OnClicked( )

위 표현은 아래의 C# 코드와 같은 에러가 있습니다.

Action action = () => { } => OnClicked( );

문자열

기본적으로 @(문자열) 로 변환됩니다.

참고로, onclick 속성의 형식은 EventCallback 이라 @( )과 완전히 동일하지만, 요소의 속성이 문자열 형식일 경우, 코드에서 못 찾으면 그 자체를 문자열 값으로 인식합니다. 이 경우, 그 문자열은 DOM 요소에 전달되고, 브라우저는 비정상적인 속성 값에 대해 별도의 처리나 에러를 발생시키지 않고 무시합니다.

정답

힌트를 드렸 듯, onclick 속성은 EventCallback<MouseEventargs> 이고, 이는 EventCallback 의 파생 클래스입니다.

위 둘은 각각 Action<T>, Action 형식과 일치하기 때문에, 이 대리자들과 형식이 같은 메서드나 람다 표현식 (무명 메서드 포함) 을 입력할 수 있습니다.

이제 정답 확인해보겠습니다.

  1. @OnClicked :가능

  2. OnClicked : 가능

  3. OnClicked( ) : 불가능
    OnClicked 는 void 를 반환하기 때문에, 대리자 값을 넣어야 하는 요구 조건에 맞지 않습니다.

  4. @( ) => OnClicked( ) : 불가능
    괄호 이후에 문자열이 섞여 있습니다.

  5. @(( ) => OnClicked( )) : 가능

  6. ( ) => OnClicked( ) : 가능

  7. _ => OnClicked( ) : 가능

  8. e => OnClicked( ) : 가능

  9. (e) => OnClicked( ) : 가능

  10. (MouseEventArgs e) => OnClicked( ) : 가능. 무명 메서드.

  11. @( e => OnClicked( )) : 가능

  12. @( (MouseEventArgs e) => OnClicked( )) : 가능.

5개의 좋아요