Blazor - (4) 자식 Component와 부모 Component

이번 포스트에서는 자식 Component와 부모 Component간에 로직을 구성하기 위한 3가지 방법인

Parameter / Ref / EventCallback에 대해 알아보겠습니다.

각각 다음과 같습니다.

• Parameter : 부모 Component에서 자식 Component로 멤버변수를 전달
• Ref : 부모 Component에서 자식 Component의 메서드를 호출
• EventCallback : 자식 Component에서 부모 Component의 메서드를 호출

 

1) 부모 Component -> 자식 Component

1 - 1) Parameter

1) User

 

이전의 User 컴포넌트를 위와 같이 수정하였습니다.

현재 User 컴포넌트가 갖고 있던 users 변수를 자식 컴포넌트인 ShowUser의 User 변수에 넘겨주고 있습니다.

이때 사용할 수 있는 것이 바로 parameter 속성입니다.

 

2) ShowUser

 

자식 컴포넌트인 ShowUser에서는 User 컴포넌트의 역할을 일부 수행합니다.

이때 부모 컴포넌트로부터 멤버 변수 값을 전달받기 위해서는 

 Attribute중 하나인 Parameter를 수식해야 합니다.

 

따라서 User 프로퍼티를 하나 생성하고

접근 권한을 public으로, Paramter를 수식하였습니다.

 

1 - 2) Ref

1) User

 

Ref 속성은 부모 Component에서 자식 Component의 메서드를 호출하는 경우 사용합니다.

Ref를 사용하기 위해서는 부모 Component에서 자식 Component의 인스턴스를 갖고 있어야 합니다.

 

갖고 있는 인스턴스를 자식 Component의 Ref값에 넘겨주고

 메서드를 호출할 때, 인스턴스로부터 메서드를 호출하도록 설정하면 됩니다.

 

2) ShowUser

 

부모 Component인 User에서 AddUser / RemoveUser 메서드를 호출하는 경우

자식 Component인 ShowUser에서도 AddUser / RemoveUser 메서드를 호출하게 됩니다.

 

2) 자식 Component -> 부모 Component

2 - 1) ShowUser

 

자식 Component에서 부모 Component의 메서드를 호출하기 위해서는 

Action이나 Event, EventCallback과 같은 이벤트 방식을 사용하여 수행할 수 있습니다.

 

그러나 EventCallback 방식이 가장 추천되는데,

이 방식을 사용하면 따로 StateHasChanged 메서드를 호출하지 않고도

컴포넌트의 변경사항을 적용할 수 있기 때문입니다.

 

위의 로직에서는 EventCallback에 등록되는 메서드가 따로 인자가 존재하지 않으므로

null을 넘겨주어 InvokeAsync하고 있습니다.

 

2 - 2) User

 

부모 Component에서 자식 Component의 EventCallback 프로퍼티에 위와 같이 메서드를 등록해야 

자식 Component가 부모 Component의 메서드를 호출할 수 있습니다.

따라서 User를 삭제할 때마다 입력폼에 Insert UserName이 작성되게 됩니다.

 

최종 실행 결과는 다음과 같습니다.