Javascript 연동

🏄‍♀️ JavaScript Interop

🤔 왜 JavaScript를 써야 할까?

Blazor는 C# 기반이지만, 웹의 영역에서 자바스크립트를 완전히 배제할 수는 없다. 예를 들어:

• 브라우저의 로컬 저장소 접근
• Alert, Prompt 등 기본적인 웹 기능
• 복잡한 차트, 시각화 라이브러리 사용 (예: Chart.js)

이러한 기능들은 JS가 더 익숙하거나 성능적으로 유리한 경우가 많으며, Blazor는 이러한 필요를 충족하기 위해 JavaScript와의 상호운용(Interop)을 제공한다.

---

✅ JavaScript 함수 호출하기

1️⃣ 간단한 JS 함수 선언

wwwroot 폴더 아래에 test.js 파일을 만들고 다음과 같은 JS 코드를 작성한다:

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

func();

• 위 코드는 전역 객체인 window에 testFunction.helloWorld() 함수를 등록한다.
• alert()을 통해 “Hello World” 메시지를 보여준다.

2️⃣ JS 파일 참조 등록

Blazor Server의 경우 _Host.cshtml에 JS 파일을 추가해야 한다:

<script src="test.js"></script>

위 코드는 <component type="typeof(App)" ... /> 위에 삽입하면 된다.

3️⃣ JSInterop Razor 컴포넌트 생성

@page "/JSInterop"
@inject IJSRuntime JSRuntime

<h3>JSInterop</h3>

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

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

• @inject IJSRuntime을 통해 JS 호출 기능을 주입한다.
• InvokeVoidAsync("testFunction.helloWorld", null)을 통해 JS 함수 호출 (void 타입)

🔎 실행 결과

“Hello World” 버튼 클릭 시 자바스크립트 alert() 팝업이 정상적으로 출력된다.

---

📥 JS에서 값을 받아오기 (prompt)

이번에는 JS에서 사용자 입력 값을 받고, C#으로 값을 전달받는 기능을 구현한다.

1️⃣ test.js에 함수 추가

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

func();

• inputName(text)는 사용자에게 프롬프트를 띄우고 입력 값을 반환한다.

2️⃣ Razor 컴포넌트에 버튼 추가

@page "/JSInterop"
@inject IJSRuntime JSRuntime

<h3>JSInterop</h3>

<!-- HelloWorld 버튼 -->
<button class="btn btn-primary" @onclick="HelloWorld">Hello World</button>

<br /><br />

<!-- InputName 버튼 -->
<button class="btn btn-primary" @onclick="InputName">Input Name</button>
<p>@_name</p>

@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 your name");
        StateHasChanged();
    }
}

• InvokeAsync<string>을 통해 JS에서 문자열을 반환받는다.
• StateHasChanged()를 통해 UI를 갱신한다.

🔎 실행 결과

“Input Name” 버튼 클릭 시 프롬프트 창이 뜨고, 입력한 이름이 페이지에 출력된다.

---

📦 JS 파일 모듈화 (JS Isolation)

기존에는 HTML에 직접 <script>를 추가했지만, Blazor는 모듈 방식도 지원한다.

1️⃣ wwwroot/js/scripts.js

export function showAlert(comment) {
    alert(comment);
}

2️⃣ Razor 컴포넌트에서 모듈 사용

@page "/"
@inject IJSRuntime JS

<button class="btn btn-primary" @onclick="ShowAlert">알림창 띄우기</button>

@code {
    private IJSObjectReference module;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            module = await JS.InvokeAsync<IJSObjectReference>("import", "./js/scripts.js");
        }
    }

    private async Task ShowAlert()
    {
        await module.InvokeVoidAsync("showAlert", "Hello, world!");
    }
}

• OnAfterRenderAsync에서 import로 모듈을 가져온다.
• module.InvokeVoidAsync()를 통해 함수 실행.

---