Blazor 하이브리드의 데이터 바인딩 및 이벤트

웹앱에 대한 UI를 정의했습니다. 이제 앱에 논리를 추가하는 방법을 탐색해 봅시다. Blazor 앱에서 별도의 .cs 파일 또는 Razor 구성 요소의 인라인에 C# 코드를 추가할 수 있습니다.

구성 요소의 C# 인라인

단일 Razor 구성 요소 파일에 HTML과 C#을 혼합하는 것이 일반적입니다. 코드 요구 사항이 단순한 구성 요소에서는 이 접근 방식이 잘 작동합니다. Razor 파일에 코드를 추가하려면 Razor 구문을 사용합니다.

Razor 지시문은 HTML로 C# 인라인을 추가하는 데 사용되는 구성 요소 태그입니다. 개발자는 지시문을 사용하여 단일 문, 메서드 또는 큰 코드 블록을 정의할 수 있습니다.

Code 지시문은 MVC 또는 페이지에서 Razor 구문을 사용하는 개발자에게 익숙할 것입니다.

@expression()을 사용하여 HTML과 인라인으로 C# 문을 추가할 수 있습니다. 더 많은 코드가 필요한 경우 @code 지시문을 사용하여 여러 개의 문을 괄호로 묶어서 추가합니다.

메서드 및 속성에 대한 템플릿에 @functions 섹션을 추가할 수도 있습니다. 이러한 섹션은 생성된 클래스의 맨 위에 추가되며 문서가 해당 섹션을 참조할 수 있습니다.

Razor 구성 요소 내에서 C# 필드, 속성 및 Razor 식 값에 HTML 요소를 데이터 바인딩할 수 있습니다. 데이터 바인딩을 사용하면 HTML과 해당 코드 간에 양방향 동기화가 가능합니다.

구성 요소가 렌더링되면 HTML에서 .NET으로 데이터가 푸시됩니다. 이벤트 처리기 코드를 실행하면 구성 요소가 자체적으로 렌더링되므로 속성 업데이트는 이벤트 처리기가 트리거되는 즉시 UI에 반영됩니다.

@bind 표시를 사용하여 HTML 입력에 C# 변수를 바인딩합니다. 다음 연습에서는 데이터 바인딩의 예를 확인해 봅니다.