Blazor 상태 관리: 고려해야 할 모범 사례

우리가 Blazor에 대해 이야기할 때 상태는 사용자 상호 작용을 포함하는 프레임워크로 빌드하는 모든 앱의 필수적인 부분입니다. 사용자가 중요한 데이터를 보기 위해 로그인해야 하는 시나리오를 생각해 보십시오. 그러나 상태가 제대로 관리되지 않기 때문에 페이지를 다시 로드할 때마다 반복해서 로그인해야 합니다. 앞으로 애플리케이션을 계속 사용할 가능성은 얼마나 됩니까? 그럴 가능성은 별로 없다고 생각합니다.

이러한 유형의 낮은 UI 응답성과 나쁜 사용자 환경을 방지하기 위해 개발자는 효과적이고 적절한 Blazor 상태 관리를 구현해야 합니다. 이렇게 하면 앱을 빌드하는 데 사용되는 Blazor 구성 요소가 서로 통신하고 부모 구성 요소에서 자식 구성 요소로 특정 데이터를 효과적으로 전송할 수 있습니다.

그러나 Blazor의 상태 관리는 정확히 어떻게 작동합니까? Blazor WebAssembly 앱과 Blazor Server 앱의 차이점은 무엇입니까? 이 빠른 가이드를 통해 자세히 알아볼 것입니다.

Try Ignite UI for Blazor

Blazor 앱의 상태 관리에 대해 자세히 살펴보기

그렇다면 Blazor에서 상태 관리란 무엇입니까? 본질적으로 이는 데이터 처리 + 응답성이 뛰어난 UI(사용자 인터페이스) 상태를 유지하는 프로세스를 나타냅니다. 다음과 같은 몇 가지 이유로 매우 중요합니다.

• 이를 통해 Blazor 애플리케이션은 연결이 끊어지거나 끊어진 경우에도 현재 상태를 유지할 수 있습니다.
• 사용자별 데이터를 기억할 수 있습니다.
• UI를 데이터와 동기화하고 앱 데이터의 모든 변경 사항은 항상 반영됩니다.
• Facilitates communication between Blazor components.
• 또한 실시간 클라이언트 측 상호 작용 기능을 관리하는 데 도움이 됩니다.

프로세스가 어떻게 생겼는지 보려면 이 간소화된 시각화 + 설명을 살펴보겠습니다.

일반적으로 Blazor 상태 관리는 사용자 기본 설정 및 양식 입력에서 전역 설정 및 실시간 업데이트에 이르기까지 앱 데이터를 체계적으로 제어하고 저장하는 것으로 이해할 수 있습니다. 구성 요소는 데이터를 공유하기 때문에 매개 변수, 연계 매개 변수 또는 서비스를 통해 데이터를 공유하지만 자체 로컬 상태를 유지할 수도 있습니다.

경우에 따라 적절한 상태 관리를 수행하려면 전역 상태 컨테이너를 구현해야 합니다. 공유 데이터를 관리하기 위한 중앙 집중식 리포지토리 역할을 하는 동시에 일관된 액세스 및 업데이트를 보장합니다. 그러나 상태 업데이트를 트리거하는 것은 무엇입니까? 여기에는 사용자 상호 작용, 이벤트 또는 외부 변경이 포함될 수 있습니다. 상태 업데이트가 트리거되면 Blazor 구성 요소가 이를 구독하여 변경 사항에 따라 UI를 렌더링합니다.

다음은 Blazor 상태 관리 사용을 고려해야 하는 몇 가지 일반적인 사용 사례입니다.

• 구성 요소 계층에서 직접 관련되지 않은 여러 구성 요소 간에 데이터 교환 및 상호 작용이 있는 경우.
• 애플리케이션의 여러 부분에서 공유 및 액세스해야 하고 사용자 인증 상태, 권한 부여, 역할 등을 추적해야 하는 데이터가 있는 경우.
• 사용자 상호 작용, 데이터 변경 등에 대한 응답으로 UI를 업데이트하려는 경우
• 공유 응용 프로그램 설정 또는 여러 구성 요소가 액세스하는 구성의 경우.
• 데이터가 자주 변경되지 않는 경우 Blazor 앱의 성능과 응답성을 개선하기 위한 데이터 캐싱입니다.
• 페이지를 새로 고칠 때(예: 페이지/앱에 장바구니, 데이터 양식 등이 있는 경우) 사용자별 데이터를 유지합니다.
• 저장된 사용자별 기본 설정(디스플레이 설정, 레이아웃 선택 등)으로 개인화된 UX를 만듭니다.
• 클라이언트와 서버 간에 실시간 업데이트를 배포해야 하는 경우.
• 각 단계가 상태를 유지하는 다단계 마법사 스타일 인터페이스를 만들어 사용자가 진행 상황을 유지하면서 앞뒤로 탐색할 수 있도록 합니다.
• 또한 필터, 정렬 조건 또는 데이터 그리드 또는 목록에 적용된 검색 쿼리를 유지 관리할 때도 유용합니다.

물론 응용 프로그램의 특정 목적과 논리, 그리고 다양한 상태 관리 기술이 이를 달성하는 데 어떻게 도움이 될 수 있는지 항상 고려해야 합니다.

Blazor에서 상태 관리를 사용하는 방법

우리는 Blazor 여러 번 논의했고 작동 방식을 이미 설명했지만, 간단히 요약하자면 프레임워크를 사용하면 순수한 C# 기술과 .NET을 사용하여 대화형 웹 애플리케이션을 빌드할 수 있습니다. 여기에는 JavaScript가 없습니다. 그러나 클라이언트-서버 상호 작용을 처리하는 방법에는 두 가지가 있습니다 - 앱을 빌드하는 한 가지 방법은 Blazor Server를 사용하는 것이고 다른 방법은 Blazor WebAssembly(WASM)를 사용하는 것입니다. Blazor 서버에서 앱은 서버에서 실행되며 모든 UI 업데이트는 SignalR 연결을 통해 클라이언트로 가져옵니다. 따라서 실제로 중앙 집중식 제어가 가능한 실시간 애플리케이션에 적합합니다.

반면에 Blazor WebAssembly는 웹 브라우저에서 직접 실행되므로 전체 클라이언트 측 실행이 가능합니다. 앱이 오프라인 또는 최소한의 서버 상호 작용으로 작동하면서 더 높은 클라이언트 리소스 소비를 처리해야 하는 시나리오에 이상적입니다.

이러한 아키텍처 차이는 Blazor Server State Management 및 Blazor WebAssembly State Management에도 반영됩니다. 이에 대해 더 자세히 살펴보겠습니다.

Blazor Server State Management

먼저 Blazor Server는 실시간 상태 업데이트에 SignalR을 사용할 수 있습니다. 그러나 일반적으로 Blazor Server 앱의 상태 관리는 회로라는 구조로 메모리에 저장됩니다. 실시간 업데이트를 가져오는 데 문제가 발생할 수 있으므로 연결 문제나 높은 네트워크 대기 시간이 없는 한 괜찮습니다. 이 시나리오에서는 Blazor 동일한 회로에 다시 연결을 시도합니다. 그러나 이것이 실패하고 지연이 너무 오래 지속되면 새로운 회로가 설정되어 잠재적으로 중요한 데이터가 손실될 수 있습니다.

Blazor WebAssembly State Management

​Blazor WebAssembly 앱의 상태 관리와 관련하여 상태는 사용자가 사용하는 브라우저에서 호스팅됩니다. 상태 관리를 위해 서버 메모리에 의존하지 않으므로 애플리케이션 무결성은 대기 시간이나 네트워크 연결 문제의 영향을 받지 않습니다. 그러나 페이지를 새로 고치거나 응용 프로그램을 다시 열면 일반적으로 상태가 다시 설정됩니다.

예를 들어 로컬 저장소를 사용하여 페이지 간의 상태를 보존하는 다중 페이지 양식이 있는 Blazor 앱이 있다고 상상해 보세요. 이렇게 하면 사용자는 완료되지 않은 양식을 제출하지 않고도 뒤로 및 앞으로 단추를 사용할 수 있습니다. 긴 설문 조사 양식과 같은 것.

상태 관리 예제

두 경우 모두 상태 지속성 수행에 대해 고려해야 합니다. Microsoft가 처음에 강조했듯이

“… 사용자가 단순히 이미 존재하는 데이터를 읽는 것이 아니라 적극적으로 데이터를 생성하는 회로 전반에서 상태를 유지합니다. 회로 간에 상태를 유지하려면 앱이 서버 메모리가 아닌 다른 저장소 위치에 데이터를 유지해야 합니다. 상태 지속성은 자동이 아닙니다. 상태 저장 데이터 지속성을 구현하기 위해 앱을 개발할 때 단계를 수행해야 합니다. 데이터 지속성은 일반적으로 사용자가 노력을 기울여 만든 고부가가치 상태에만 필요합니다."

다음은 상태를 유지할 수 있는 몇 가지 일반적인 위치입니다.

• Server-side storage (Database)
• 클라이언트 측(브라우저)
• URL
• 인 메모리 상태 컨테이너 서비스

또한 앱은 서버 측 저장소에 의존할 수 있으며, 특히 다양한 사용자와 장치 간에 영구적인 데이터 지속성과 관련하여 사용할 수 있습니다. 사용 가능한 옵션은 다음과 같습니다.

• Blob storage
• Key-value storage
• Relational database
• 테이블 스토리지

데이터가 저장되면 사용자의 상태가 유지되고 모든 회로에서 액세스할 수 있습니다.

Blazor Application State Management를 위한 Best Practices & Approaches

Blazor State Management가 무엇이며 Blazor WebAssembly 및 Blazor Server 앱에서 어떻게 작동하는지 명확히 한 후 Infragistics에서 탐색하여 지금 강조하고 싶은 몇 가지 모범 사례와 접근 방식에 대해 논의해 보겠습니다. 각 접근 방식은 서로 다른 목적을 수행한다는 점을 명심하십시오. 따라서 접근 방식을 선택하고 모범 사례에 의존하는 것은 항상 앱 요구 사항, 필요한 상태 관리 범위, Blazor 앱 내의 복잡성 등 프로젝트의 세부 사항에 따라 달라집니다.

구성 요소 매개 변수 또는 계단식 값

Blazor를 사용하면 매개 변수를 사용하여 구성 요소 간에 데이터를 전달할 수 있습니다. 구성 요소에는 데이터를 허용하는 매개 변수가 있을 수 있으며, 이러한 매개 변수는 부모 구성 요소에서 설정할 수 있습니다. 연계 매개 변수를 사용하면 동일한 데이터를 구성 요소 계층 구조(부모 구성 요소에서 자식 구성 요소로)로 전달하거나 전체 앱 컨텍스트에 CascadingValue를 래핑할 수도 있습니다.

언제 사용하는 것이 좋습니까?

매개 변수를 사용하면 계층 구조에서 부모와 자식 구성 요소 간에 데이터를 공유할 때 유용합니다.

URL과 쿼리 매개변수에 상태 저장Saving states into URLs and Query Parameters

이는 사용자가 URL을 전송하여 사용자 간에 응용 프로그램과 해당 상태를 공유할 수 있기 때문에 매우 중요합니다(예: 쿼리 매개 변수로 포함된 필터링 기준).

언제 사용하는 것이 좋습니까?

예를 들어 사용자가 저장된 URL을 클릭하여 특정 보기 또는 구성에 직접 액세스할 수 있도록 허용하거나 영구 링크를 만들려는 경우입니다.

Fields & Properties를 통해 Component State 유지 관리

Blazor의 가장 좋은 점 중 하나는 각 구성 요소가 자체 상태를 유지할 수 있으므로 필드와 속성을 사용하여 구성 요소 내의 상태를 쉽게 관리할 수 있다는 것입니다. 이러한 방식으로 구성 요소 상태는 정의된 특정 구성 요소로 격리됩니다.

언제 사용하는 것이 좋습니까?

다른 구성 요소와 공유할 필요가 없는 구성 요소별 데이터가 있을 때 유용합니다.

의존성 주입 및 생성 서비스 사용

서비스를 만들면 종속성 주입을 사용하여 모든 구성 요소에서 사용할 수 있도록 해야 합니다. 이 접근 방식은 여러 구성 요소에서 액세스할 수 있어야 하는 데이터 및 상태를 공유하는 데 유용합니다.

언제 사용하는 것이 좋습니까?

이는 응용 프로그램 전체 상태를 관리하고, 다른 구성 요소에 데이터를 제공하고, 응용 프로그램 상태를 관리하기 위한 중앙 위치를 제공하려는 경우에 유용합니다.

Third-Party State Management 라이브러리에서 도움 받기

Blazor 개발자는 Fluxor, Blazor-State 또는 Redux 기반 라이브러리와 같은 타사 라이브러리를 사용하여 앱의 상태를 관리할 수 있습니다. 상태 관리에 대한 보다 구조적이고 복잡한 솔루션을 제공하고 + Flux 아키텍처와 같은 잘 정립된 패턴을 구현하기 때문에 유용합니다.

언제 사용하는 것이 좋습니까?

더 크고 복잡한 Blazor 애플리케이션에서 상태 관리를 구성하고 간소화하려는 경우.

결론적으로...

효과적인 상태 관리는 응답성이 뛰어나고 유지 관리 가능하며 사용자 친화적인 Blazor 애플리케이션을 빌드하는 데 핵심. 이 문서에서 설명하는 모범 사례와 접근 방식을 구현하면 프로젝트가 데이터를 효율적으로 처리하고, 구성 요소 상호 작용을 원활하게 동기화하고, 더 나은 UX를 제공할 수 있습니다. 그러나 무엇을 선택하든 항상 애플리케이션의 상태 요구 사항을 고려하여 이 접근 방식이 장기적으로 더 많은 성과를 거둘 수 있도록 해야 합니다.