State 관리

🛠 실습 프로젝트 설정

• 기존 프로젝트(BlazorApp, BlazorStudy)는 삭제
• 새로 BlazorApp Blazor Server 프로젝트 생성

---

🧪 문제 확인: Counter 상태 초기화

Blazor를 실행하면 Counter 메뉴에서 카운트를 증가시킬 수 있습니다.
하지만 다른 페이지로 이동 후 다시 돌아오면 Count 값이 초기화됩니다.

이 문제를 해결하기 위해 Scoped 서비스로 상태를 유지해보겠습니다.

---

🧱 CounterState 클래스 생성

Data/CounterState.cs

namespace BlazorApp.Data
{
    public class CounterState
    {
        public int Count { get; set; }
    }
}

• 카운트 값을 저장할 전용 상태 클래스
• Count 프로퍼티는 외부에서 get/set 가능

---

🔧 Program.cs에 DI 등록

builder.Services.AddScoped<CounterState>();

• Scoped로 등록했기 때문에, 사용자 세션마다 별도의 인스턴스로 동작합니다.

---

🧾 Counter.razor에서 상태 사용

@page "/counter"
@inject BlazorApp.Data.CounterState CounterState

<h1>Counter</h1>

<p>Current count: @CounterState.Count</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private void IncrementCount()
    {
        CounterState.Count++;
    }
}

• @inject를 통해 CounterState 주입
• 버튼 클릭 시 Count를 증가시킴

✅ 이 상태에서는 다른 메뉴로 이동 후 다시 Counter로 돌아와도 값이 유지됩니다.

---

❌ 문제 발생: UI 갱신 안됨

이제 NavMenu.razor에서 현재 Count 값을 표시해보겠습니다.

@inject BlazorApp.Data.CounterState CounterState

<p style="color:white">Counter: @CounterState.Count</p>

• 그러나 Counter를 증가시켜도 여기 값은 갱신되지 않음

왜?
→ Blazor는 값이 변경되어도 수동으로 StateHasChanged()를 호출하지 않으면 UI를 갱신하지 않음

---

🧠 CounterState 개선 - 이벤트 기반 상태 알림

public class CounterState
{
    private int _count = 0;

    public Action? OnStateChanged;

    public int Count
    {
        get => _count;
        set
        {
            _count = value;
            Refresh();
        }
    }

    private void Refresh() => OnStateChanged?.Invoke();
}

• 값이 바뀔 때마다 Refresh() 호출
• OnStateChanged를 통해 이벤트 구독자에게 알림

---

📦 NavMenu.razor에서 갱신 처리

@inject BlazorApp.Data.CounterState CounterState
@implements IDisposable

<p style="color:white">Counter: @CounterState.Count</p>

@code {
    protected override void OnInitialized()
    {
        CounterState.OnStateChanged += Update;
    }

    void Update()
    {
        StateHasChanged(); // 수동 갱신
    }

    public void Dispose()
    {
        CounterState.OnStateChanged -= Update; // 구독 해제
    }
}

• 상태 변경을 구독(+=)
• UI 갱신은 StateHasChanged()로 수동 트리거
• 컴포넌트 소멸 시 Dispose()에서 구독 해제

---

✅ 결과 확인

1. Counter 값을 증가시킴
2. NavMenu의 Count 값도 실시간 갱신
3. 세션 유지 중 페이지를 이동하더라도 상태가 보존됨

---