Blazor WebAssembly에서 TransferService를 만들어 페이지 간 데이터 공유하는 방법을 설명해 드리겠습니다.
✅ 1. TransferService란?
- Blazor WebAssembly에서 페이지 간 데이터를 공유하는 서비스
- 상태(State)를 관리하는 역할 (ex: 폼 데이터, 임시 사용자 입력값 유지)
- Singleton 또는 Scoped로 등록하여 어디서든 접근 가능
✅ 2. TransferService 구현
Blazor WebAssembly에서는 **DI(의존성 주입)**을 통해 TransferService를 만들어 상태를 관리할 수 있습니다.
🔹 TransferService.cs
csharp
복사편집
using System; using System.Collections.Generic; using System.ComponentModel; using System.Runtime.CompilerServices; public class TransferService : INotifyPropertyChanged { private readonly Dictionary<string, object> _data = new(); public event PropertyChangedEventHandler? PropertyChanged; public void Set<T>(string key, T value) { _data[key] = value!; NotifyStateChanged(); } public T? Get<T>(string key) { return _data.TryGetValue(key, out var value) ? (T)value : default; } public void Remove(string key) { if (_data.ContainsKey(key)) { _data.Remove(key); NotifyStateChanged(); } } public void Clear() { _data.Clear(); NotifyStateChanged(); } private void NotifyStateChanged([CallerMemberName] string? propertyName = null) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } }
✅ 설명
- 내부 Dictionary<string, object>를 사용하여 임시 데이터 저장
- Set<T>() : 데이터 저장
- Get<T>() : 데이터 가져오기
- Remove() : 특정 데이터 삭제
- Clear() : 모든 데이터 삭제
- INotifyPropertyChanged 구현 → Blazor UI 자동 업데이트 지원
✅ 3. Program.cs에 서비스 등록
Blazor WebAssembly의 Program.cs에서 TransferService를 Scoped 서비스로 등록합니다.
🔹 Program.cs
csharp
복사편집
builder.Services.AddScoped<TransferService>();
✅ 이제 Blazor 컴포넌트에서 TransferService를 사용할 수 있음
✅ 4. Blazor 페이지 간 데이터 공유 예제
이제 TransferService를 사용하여 페이지 간 데이터 전송을 구현합니다.
🔹 예제 1: Page1.razor (데이터 입력 후 이동)
razor
복사편집
@page "/page1" @inject TransferService TransferService @inject NavigationManager Navigation <h3>Page 1: 데이터 입력</h3> <input @bind="message" placeholder="메시지 입력" /> <button @onclick="SaveAndGoToPage2">Page 2로 이동</button> @code { private string message = ""; private void SaveAndGoToPage2() { TransferService.Set("Message", message); Navigation.NavigateTo("/page2"); } }
✅ 입력한 데이터를 TransferService에 저장 후 /page2로 이동
🔹 예제 2: Page2.razor (데이터 확인)
razor
복사편집
@page "/page2" @inject TransferService TransferService @inject NavigationManager Navigation <h3>Page 2: 받은 메시지</h3> <p>@receivedMessage</p> <button @onclick="GoBack">Page 1로 이동</button> @code { private string receivedMessage = ""; protected override void OnInitialized() { receivedMessage = TransferService.Get<string>("Message") ?? "데이터 없음"; } private void GoBack() { Navigation.NavigateTo("/page1"); } }
✅ Page1에서 저장한 데이터를 Page2에서 가져와 표시
✅ 5. TransferService 활용 예제
📌 예제 1: 로그인 후 사용자 정보 공유
razor
복사편집
// Login.razor @inject TransferService TransferService @inject NavigationManager Navigation <input @bind="username" placeholder="이름 입력" /> <button @onclick="Login">로그인</button> @code { private string username = ""; private void Login() { TransferService.Set("Username", username); Navigation.NavigateTo("/dashboard"); } }
razor
복사편집
// Dashboard.razor @inject TransferService TransferService <h3>대시보드</h3> <p>환영합니다, @TransferService.Get<string>("Username")!</p>
✅ 📌 결론
1️⃣ TransferService는 Blazor에서 페이지 간 데이터 공유를 쉽게 해줌
2️⃣ Scoped로 등록하여 Blazor 컴포넌트 간 데이터 유지 가능
3️⃣ 입력 폼, 로그인 정보, 임시 데이터 저장 등에 활용 가능
🚀 이제 Blazor WebAssembly에서 페이지 간 데이터를 자유롭게 공유할 수 있습니다! 😊
728x90
댓글