Blazor 코드 분석

Components

Components는 Razor 구성 요소 파일(.razor 파일 확장명 사용)에서

C# 및 HTML 태그 조합을 사용하여 구현됩니다.

 

Razor 구문

Components 는 Razor 구문을 사용합니다.

‘지시문(Directive)’과 ‘지시문 특성(Directive Attribute)’이라는

두 가지 Razor 기능이 구성 요소에서 광범위하게 사용됩니다.

이러한 기능은 Razor 태그에 표시되고 @로 시작하는 예약 키워드입니다.

 

이름

Components의 이름은 대문자로 시작해야 합니다.

• ProductDetail.razor는 유효합니다.
• productDetail.razor이 잘못되었습니다.

Components 파일 경로는 파스칼식 대/소문자†를 사용

라우팅 가능한 구성 요소의 구성 요소 파일 경로는

Components 경로 템플릿의 단어 사이 공백에 하이픈이 표시되는 URL과 일치.

 

라우팅

Blazor의 라우팅은 @page 지시문으로 앱의 액세스 가능한 각 구성 요소에 경로 템플릿을 제공하여 수행

 

태그

Components의 UI는 Razor 태그인 C# 및 HTML로 구성되는 구문을 사용하여 정의

Components 클래스의 멤버는 하나 이상의 @code 블록에 정의

Components 멤버는 @ 기호로 시작하는 C# 식을 사용하는 렌더링 논리에서 사용

 

counter 예제 분석

 

 

 

Line 1 : @page 지시문을 사용하여 경로 설정

Line 3: 페이지 제목 설정

Line 7: @currentCount 를 사용하여 현재 수를 표시.

currentCount 는  (Line 11) @code 블록의 C# 에 정의된 변수 

Line 9: @onclick 는 @code 블록의 IncrementCount() 를 호출

Line 11: @code 블록을 정의 하고 currentCount 변수 값을 증가 시키는 IncrementCount() 정의

 

 

관련영상

https://youtu.be/CyLnDEmBUgc