[blazor] 부모 자식 컴포넌트끼리 데이터 교환

코찔찔이·2023년 6월 25일

.net6 action blazor

blazor강의 따라하기

목록 보기

6/23

강의제목 : 10. ParentChild_부모 컴포넌트에서 자식 컴포넌트로 또는 그 반대로 데이터 주고 받기

부모 컴포넌트에서 자식 컴포넌트 호출

부모 컴포넌트에서 자식 컴포넌트로 데이터 전송

자식 에서 부모로 데이터 전송

Action 대리자 사용 하여 call back 함수 전달.

페이지 작성

1.부모 페이지

FrmChild 를 호출 하며 호출시 parameter를 전송 할 수 있다.

OnParentCall 매개변수가 없는 메소드 전송

SendPageNumber int 매개변수를 받는 메소드 전송
해당 메소드를 전송하여 자식폼에서 매개변수 실행시 page번호를 넣어 부모에게 전송 할 수 있다.

FrmParent.razor

@page "/Demos/ParentChild/FrmParent"
@inject IJSRuntime js

<h3>FrmParent</h3>
<input type="button" value="호출" @onclick=ParentCall/>

<FrmChild OnParentCall="ParentCall" fromParentData="1515" SendPageNumber=GetPage></FrmChild>

@code {
    protected void ParentCall()
    {
        js.InvokeAsync<object>("alert", "부모에서 호출 됨.");
    }

    protected void GetPage(int pageNumber)
    {
        js.InvokeAsync<object>("alert", $"자식에서 받은 페이지 번호 : {pageNumber}");
    }
}

2. 자식 페이지

fromParentData 부모에서 매개변수로 int값을 받음.

OnParentCall 부모에게 매개변수가 없는 메소드를 매개변수로 받음.

SendPageNumber 부모에게 매개변수 int가 한개 있는 메소드를 매개변수로 받음.

추가 내용 Action, Func

Action 반환값이 없는 메소드를 대리자로 전달 받을 수 있음.
매개변수는 최대 16개 까지 가능 하며 Action<int,int,int....>로 받을 수 있음.
public Action<int,int> Example로 변수를 선언 하면 int 매개변수가 2개있는 메소드를 받을 수 있음.

Func 반환값이 있는 메소드를 대리자로 전달 받을 수 있음.
매개변수는 최대 16개 이며 Func<int,int.... ,string>로 받을 수 있으며 마지막 string은 반환 타입
public Func<int,int,string> Example로 변수를 선언 하면 int 매개변수 2개고 반환값이 string인 메소드를 받을 수 있음.

FrmChild.razor

@inject IJSRuntime js


<h3>FrmChild</h3>

부모에서 받은 값 : @fromParentData
<br />
<button type="button" @onclick="ParentCall" >호출</button>
<br />
<input type="button" value="1페이지" @onclick="@(() => SendPage(1))" />
<input type="button" value="2페이지" @onclick="@(() => SendPage(2))" />

@code {
    //부모에서 받을 int 매개 변수
    [Parameter]
    public int fromParentData { get; set; }

    //부모에서 Action(반환 값 없는 call back)함수를 받음.
    [Parameter]
    public Action OnParentCall { get; set; }


    //부모에서 Action(반환 값 없는 call back)함수를 받음.
    [Parameter]
    public Action<int> SendPageNumber { get; set; }

    protected void ParentCall()
    {
        //?는 번수가 null인지 체크 후 null이 아닐 경우 invoke 실행
        OnParentCall?.Invoke();
    }

    protected void SendPage(int number)
    {
        SendPageNumber?.Invoke(number);
    }

}