[블레이저] prototype, call 활용해서 JS interop +Reflect

c#은 잘 알지만 js는 잘 모르는 초보 웹개발자 입장에서,

element.click() 같은 js코드를 blazor에서 형태 그대로 재현하고자 한다면 헬퍼 js코드를 작성해서 끌어다 쓰거나,

메모리누수나 코드복잡성을 감수하고 IJSObjectReference로 element 받아다 invoke하고 별에별 뻘짓을 해야한다.

내게 자스좀 치는 멘토가 있었다면 진작에 아래와같이 비교적 간결하게 정리할수 있었을텐데 인제야 조합해냈다.

@inject IJSRuntime js

<button @onclick='()=>ButtonOnClick()'>Click Me</button>

<button @ref=btn onclick='alert("hello")'>Click That</button>

@code {

ElementReference btn;

void ButtonOnClick() => js.InvokeVoidAsync("HTMLElement.prototype.click.call", btn);

}

new Array() 같은코드도 Array.prototype.constructor() 로 호출하면 댄다.

+2025-04-22

@inject IJSRuntime js

@code {

ElementReference ef;

}

<h1 @ref=ef>hello!</h1>

<button @onclick='async () => Console.WriteLine(await js.InvokeAsync<string>("Reflect.get", ef, "innerText"))'>get innerText</button>

<button @onclick='async () => await js.InvokeVoidAsync("Reflect.set", ef, "innerText", "안녕하세요!")'>set innerText</button>

<button @onclick='async () => await js.InvokeVoidAsync("Object.assign", ef, new { innerText = "와우" })'>set innerText</button>

댓글 0