Blazor를 사용하다 보면 Razor 컴포넌트의 @code {} 안에서 버튼 클릭 이벤트 같은 걸 직접 처리하게 된다.
이걸 보면서 "어? 이거 자바스크립트 하는 역할을 C#이 하네?" 라는 생각이 든다면, 그게 맞다. 😎
이 글에서는 Blazor가 클라이언트 단에서 어떻게 동작하는지,
그리고 JavaScript를 얼마나 대체할 수 있는지를 정리하려한다.
1. Razor 컴포넌트는 클라이언트 코드다.
Blazor에는 두 가지 실행 방식이 있다.
| Blazor 종류 | 설명 |
|---|---|
| Blazor Server | 서버에서 실행되고, SignalR을 통해 브라우저와 통신 |
| Blazor WebAssembly (WASM) | C# 코드가 브라우저 안에서 직접 실행됨 (JavaScript 대체!) |
즉, Blazor WebAssembly는 완전히 클라이언트 측 C# 실행이라고 볼 수 있다.
2. @code {} 안의 C# 메서드는 JavaScript 이벤트 핸들러 느낌
<button @onclick="HandleSubmit">Submit</button>
@code {
private void HandleSubmit()
{
Console.WriteLine("제출됨!");
}
}
이 구조는 마치 JavaScript에서 onclick 이벤트 핸들러를 작성한 것과 같다.HandleSubmit() 함수는 Blazor에서 직접 바인딩되어 실행되며, C#으로 UI와의 상호작용을 완벽하게 제어할 수 있다.
Blazor는 이렇게 JavaScript 역할을 대신함
| 기능 | JavaScript | Blazor (C#) |
|---|---|---|
| UI 렌더링 | DOM 조작 | Razor + 컴포넌트 |
| 이벤트 처리 | onclick, onchange 등 |
@onclick, @onchange |
| 비동기 처리 | fetch().then(...) |
async/await, HttpClient |
| 상태 관리 | 전역 변수, 라이브러리 | C# 필드, StateHasChanged() |
| 라이프사이클 | DOMContentLoaded |
OnInitializedAsync() 등 |
3. 그럼 JavaScript는 이제 안 써도 되는건가?
대부분은 C#으로 충분!
하지만 다음과 같은 경우에는 JavaScript Interop을 사용할 수 있음.
- 브라우저 API 직접 접근 (
window.scrollTo등) - 외부 JS 라이브러리 사용 (예: Chart.js, Mapbox 등)
- 복잡한 사용자 경험 구현
※ JavaScript 호출 예시 (JSInterop)
@inject IJSRuntime JSRuntime
<button @onclick="ShowAlert">Alert 띄우기</button>
@code {
private async Task ShowAlert()
{
await JSRuntime.InvokeVoidAsync("alert", "헬로 자바스크립트!");
}
}
4. 요약 정리
| 질문 | 답변 |
|---|---|
| Razor 컴포넌트는 클라이언트냐? | ✅ 예, 특히 WASM은 완전 클라이언트 코드 |
| @code 함수는 JS 이벤트랑 같냐? | ✅ 맞아! `onclick` 같은 역할 |
| JavaScript 없이 가능? | ✅ 거의 다 가능! API, UI, 비동기 다 C#으로! |
| JavaScript 완전 안 써도 되냐? | ⛔ 아주 일부는 JSInterop 필요함 |
✍️ 마무리
Blazor는 C#만으로도 SPA(Single Page Application)을 만들 수 있게 해주는 혁신적인 프레임워크.
JavaScript 없이도 대부분의 UI 상호작용, API 호출, 상태 관리를 할 수 있음
물론, JSInterop을 통해 JS와도 잘 연동되기 때문에 “필요한 만큼만 JavaScript”를 사용할 수 있다는 점도 큰 장점.