Part 6-5-11. Blazor 입문 : Javascript 연동

 

 

🦮 Blazor 입문

 

 지난 시간에는 State 관리에 대해서 학습하는 시간을 가져보았다. Counter Nav 메뉴에서 클릭하여 숫자를 올려도, 다른 탭을 왔다갔다 할 경우 클릭하여 숫자를 올린 값이 다 사라져서 문제가 되었지만, 이를 Scoped를 통해 처리하였고 이 후, UI가 갱신되지 않는 현상도 마찬가지로 이벤트와 StateHasChanged를 통해 처리하여 실시간으로 갱신이 되게끔 처리하였다. 이번 시간에는 Blazor에서의 Javascript 연동에 대해서 학습하는 시간을 가져보며, 마찬가지로 직접 실습하며 페이지를 제작해보도록 한다.

 

---

 

🏄‍♀️ Javascript 연동

 

 먼저 왜 자바 스트립트를 써야 할까?, 이는 이전에 배운 State 관리와 이어진다. 이전 시간에 우리는 Counter State를 만들어 저장하는 방법에 알아보았지만, 이 방법또한 결국 브라우저를 껏다 키면은 다시 리셋이 된다. 따라서 브라우저 자체 메모리에 진짜로 데이터를 저장해야한다. 따라서 이럴때에는 C#이 아닌 자바스크립트를 통해 이를 처리해야 한다.

 

 또한 경우에따라 C#으로는 만들 수 없는 기능들이 존재하는데 이 때 Javascript를 사용해야 하는 경우도 존재한다. 예를 들어 주식 사이트를 만든다고 할 경우, C#으로의 구현은 모든 걸 새로 만들어야 하겠지만 Javascript를 사용한다면 이미 존재하는 라이브러리를 사용하면 되기 때문에 개발 시간도 줄어든다는 장점이 있다.

 

 먼저 wwwroot 폴더 밑에 자바 스크립트 파일을 새롭게 만들어주도록 하자. 이름은 상관없다. 자바 스크립트는 펑션(func) 조차 int와 double과 같이 기본 형식 중 하나이다. 아래와 같이 작성하도록 하자.

 

var func = (function () {

    window.testFunction = {
        helloWorld: function () {
            return alert("Hello World");
        }
    }
})

func();

 

 해당 코드는 단순히 alert 기능을 통해 hello world 팝업을 띄워주는 단간한 기능이다. 이 후 _Host.cshtml 파일에 작성한 Javascript를 사용하기 위해 스크립트를 등록해주도록 하자.

 

@page "/"
@namespace BlazorApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

@* test.js 스크립트를 등록 *@
<script src="test.js"></script>

<component type="typeof(App)" render-mode="ServerPrerendered" />

 

 이 후, Pages 폴더 밑에 자바스크립트 연동을 위한 레이저 컴포넌트 JSInterop를 생성해주고 아래와 같이 작성하자. 

 

@page "/JSInterop"
@inject IJSRuntime JSRuntime

<h3>JSInterop</h3>

<div>
	<button type="button" class="btn btn-primary" @onclick="HelloWorld">
		Hello World
	</button>
</div>

@code {

	public async void HelloWorld()
	{
		await JSRuntime.InvokeVoidAsync("testFunction.helloWorld", null);
	}
}

 

 먼저 자바 스크립트를 활용하기 위해 의존성 주입이 필요하다. 따라서 Javascript Runtime이라는 IJSRuntime를 선언하고 이를 JSRuntime이라고 작성해주어야 Javascript를 사용할 수 있다. 이후 JSRuntime.InvokeAsync에서 우리가 작성한 자바 스크립트를 연동해주어야 한다. 이 떄에는 InvokeVoidAsync를 사용한다. 왜냐하면 우리가 작성한 스크립트는 단순히 alert를 통해 Hello World 팝업을 띄우기 때문에 Void 형태의 Invoke를 사용하고, 별다른 리턴값이 없기 때문에 인자 값으로는 null을 넣어준다. 이 후 실행을 해보자.

 

 

 버튼을 클릭할 때 우리가 작성한 자바 스크립트의 Hello World가 정상적으로 뜨고 있는 것이 보인다. 😀

 

---

 

 조금 더 나아가 자바 스크립트에서 넘겨준 값을 C#에서도 재 사용할 수 있다. 먼저 test.js 스크립트로 돌아가 아래와 같이 추가적으로 작성하자. 

 

var func = (function () {

    window.testFunction = {
        helloWorld: function () {
            return alert("Hello World");
        },
        inputName: function (text) {
            return prompt(text, 'Input Name');
        }
    }
})

func();

 

 해당 함수는 이름을 입력받는 기능을 작동하게끔 한다. 작성한 함수를 실행시키기 위해 JSInterop 컴포넌트로 돌아가 추가적으로 함수를 작성하도록 하자.

 

@page "/JSInterop"
@inject IJSRuntime JSRuntime

<h3>JSInterop</h3>

<div>
	<button type="button" class="btn btn-primary" @onclick="HelloWorld">
		Hello World
	</button>
</div>

<br />

<div>
	<button type="button" class="btn btn-primary" @onclick="InputName">
		Input Name
	</button>
	<p>>@_name</p>
</div>

@code {

	string _name = "";

	public async void HelloWorld()
	{
		await JSRuntime.InvokeVoidAsync("testFunction.helloWorld", null);
	}

	public async void InputName()
	{
		_name = await JSRuntime.InvokeAsync<string>("testFunction.inputName", "Input Name");
		StateHasChanged();
	}
}

 

 이제는 인자 값을 받기 때문에, InvokeAsync를 함수를 통해 처리를 하고, 인자 값으로는 Input Name을 사용해주어 이름을 입력 할 경우 _name에 이를 저장하도록 처리한다. 마찬가지로 스크립트를 다 작성하면 실행하여 결과를 보도록 하자.

 

 

 Input Name을 클릭하고, 이름을 작성하면 위 이미지와 같이 작성한 이름이 나타나는 것을 볼 수 있다.