공통 논리를 처리하고 특정 논리를 해당 Component 의 사용자에게 맡길 수 있습니다. 단일 슬롯 콘텐츠 프로젝션 RenderFragment? 형태로 정의된 Property 에 content (HTML or Razor element) 를 전달 할 수 있다. Parent 에서는 이 RenderFragment 에 element 를 전달하여 유연한 contents 를 구성할 수 있다. (vue 개발자가 있다면 slot 과 비슷한 개념으로 생각하면 된다.) Pages/Child.razor Child @ChildContent @code { [Parameter] public RenderFragment? ChildContent { get; set; } } Pages/Parent.razor @page "/inter..

하나의 data 를 모든 Component 가 사용할 때 선호되는 기술 TransferService 라는 state management class 를 따로 두고 해당 class 가 model class 를 관리하도록 하는 형태 Data/TransferService.cs using System.Collections.ObjectModel; namespace BlazorTutorial.Data; public class TransferService { private string _data = "TransferService"; public string Data { get => _data; set { _data = value; DataChanged?.Invoke(this, value); } } public even..

상위 구성 요소에서 하위 구성 요소로 데이터를 전달하는 방법 또한 url 을 통해 parameter 를 전달 하기도 한다. Pages/Parent.razor @page "/interaction/parameters" Parent @code { public string FirstData { get; set; } = "First data"; public string SecondData { get; set; } = "Second data"; } Pages/Child.razor Child @InputParameter @RequiredInputParameter @code { [Parameter] public string InputParameter { get; set; } = "Default Value"; [Edit..

계단식 매개변수는 상위 구성요소에서 하위 구성요소로 매개변수를 전달할 수 있게 해주는 기술 1. GrandParent Component 의 공용 속성을 선언 및 전달 Pages/GrandParent.razor @page "/interaction/cascadingparameters" GrandParent @code { public string Data { get; set; } = "from GrandParent"; } 2. Parent Component 에서 해당 값 받기 Pages/Parent.razor Parent Received value at grand parent: @ReceivedData @code { [CascadingParameter] public string ReceivedData { ge..

Component 간 데이터 공유하는 방법은 3가지가 있다. CascadingParameter Parameter Transfer Service CascadingParameter Base 로부터 Parent로 Parent 에서 다시 Child 로 데이터를 전달하는 데 사용 Parameter parent 에서 직접 child 로 데이터를 전달하는데 사용 TransferService 하나의 데이터 원본으로 모든 Component 가 공유 하려는 경우에 사용 가능한 기술 관련영상

Child Component 지원 식 구성 요소에 변경 내용을 적용하려면 부모 구성 요소의 .razor.css 파일에 있는 모든 하위 항목 요소에 ::deep 조합기를 사용한다. ::deep h1 { color: red; font-family: Tahoma, Geneva, Verdana, sans-serif; } parent @page "/css/isolation-parent" Parent Shared/CssIsolationChild Child Component Shared/Global CSS 정의된 CSS 규칙을 모든 구성 요소에서 재사용할 수 있는 기술 /wwwroot/css/site.css 을 _Layout.cshtml 에서 기본적으로 사용한다. site.css 파일을 열고 아래 css 규칙을 정의..