Radzen이란?

1. Radzen 정의

• Blazor 애플리케이션에서 다양한 UI 구성 요소를 제공하는 UI 라이브러리

• 웹 애플리케이션을 개발할 때 자주 사용되는 컴포넌트들을 쉽게 추가할 수 있음

• Blazor WebAssembly와 Blazor Server에서 모두 사용가능

• 개발자가 UI 요소를 빠르게 구축하고, 사용자 경험을 향상시킬 수 있음

2. Radzen의 주요 특징

• 풍부한 UI 구성 요소
• 카드, 버튼, 드롭다운, 그리드, 차트 등 다양한 UI 구성 요소들을 제공합 복잡한 UI를 신속하게 구축 가능

• 강력한 데이터 바인딩 지원
• 대부분 컴포넌트는 데이터 바인딩을 지원 C# 코드와 직접 연결하여 데이터의 변화를 UI에 즉시 반영할 수 있음 예: @bind-Value

• 사용자 정의 가능한 템플릿
• 다양한 컴포넌트에서 템플릿을 사용하여 사용자 정의 UI를 만들 수 있음 예: RadzenDataGrid 각 셀에서 템플릿을 사용해 복잡한 데이터를 표시하거나 입력 항목을 보다 직관적으로 제공

• 반응형 디자인
• 다양한 화면 크기에 맞게 자동으로 조정되는 UI를 제공 데스크탑, 태블릿, 모바일 장치에서 일관된 사용자 경험을 제공

• 정렬, 필터링, 페이징 기능
• RadzenDataGrid와 같은 테이블 컴포넌트에서 정렬, 필터링, 페이징 기능을 지원

• 다양한 스타일 옵션
• 버튼, 카드, 테이블 등 각종 UI 요소에 대해 다양한 스타일을 지원 원하는 디자인을 손쉽게 적용할 수 있음

• 다국어 지원 및 로컬화
• Radzen은 다국어 지원을 제공 여러 언어를 지원하는 애플리케이션을 만들 때 유용
 

3. Radzen의 장점

• 빠른 UI 개발
• 기본적인 UI 컴포넌트를 빠르게 사용하여 개발 시간을 단축시킬 수 있음

• 상호작용이 많은 웹 애플리케이션 개발 지원
• Radzen은 상호작용이 많은 UI를 지원하는 다양한 컴포넌트를 제공 예: RadzenDataGrid 정렬, 필터링, 페이징을 지원하여 데이터를 직관적으로 다룰 수 있음

• 커스터마이징 가능
• 템플릿을 사용하여 각종 컴포넌트를 커스터마이징 가능 요구 사항에 맞는 복잡한 UI를 만들 수 있음

• Blazor 통합
• Blazor와 완벽하게 통합 Blazor의 상태 관리와 데이터 바인딩 기능을 최대한 활용할 수 있음

• 타사 UI 라이브러리와 통합
• Bootstrap이나 Material Design과 같은 스타일 적용 가능

• 무료 및 상용 버전
• 무료와 상용 버전을 제공 상용 버전에서는 더 많은 고급 기능과 지원을 제공
 

4.Radzen UI 컴포넌트

• RadzenCard : 카드 형태로 UI를 그룹화하는 컴포넌트
• 카드 안에 여러 UI 요소를 넣어 사용자에게 깔끔하게 정보를 표시할 수 있습니다.

<RadzenCard>
    ...
</RadzenCard>

• RadzenRow : 행 (row)을 정의하는 컴포넌트
• 여러 항목을 수평으로 배치할 때 사용
• RadzenRow 안에 RadzenColumn을 넣어 요소들을 구체적으로 배치

<RadzenRow>
    <RadzenLabel Text="상품 선택"></RadzenLabel>
    <RadzenDropDown @bind-Value=@SelectedItemCode ... />
    <RadzenButton Text="조회" ButtonStyle="ButtonStyle.Warning" Click="OnSearch"></RadzenButton>
</RadzenRow>

• RadzenLabel : 단순한 텍스트를 표시하는 컴포넌트
• 일반적으로 입력 필드나 버튼과 함께 사용

<RadzenLabel Text="상품 선택"></RadzenLabel>

• RadzenDropDown : 드롭다운 목록을 표시하는 컴포넌트
• @bind-Value 속성을 사용하여 선택된 값과 바인딩
• Data : 드롭다운에 표시할 데이터의 소스를 지정
• TextProperty : 표시할 텍스트 속성
• ValueProperty : 선택된 값을 바인딩할 속성

<RadzenDropDown @bind-Value=@SelectedItemCode Data=@ItemSource TextProperty="SearchStr" ValueProperty="ItemCode" Change="(args)=>ChangeItem(args)" />

• RadzenButton : 버튼을 정의하는 컴포넌트
• Click 이벤트를 통해 클릭 시 동작을 정의
• ButtonStyle 속성으로 버튼의 스타일을 지정

<RadzenButton Text="조회" ButtonStyle="ButtonStyle.Warning" Click="OnSearch"></RadzenButton>

• RadzenDataGrid : 데이터를 테이블 형식으로 표시하는 컴포넌트
• 여러 행과 열로 구성
• 다양한 속성들을 통해 기능을 설정

<RadzenDataGrid Data="@DataSource" TItem="KakaoDiscondMng" AllowSorting="true" AllowFiltering="false" @ref=GridRef>
    ...
</RadzenDataGrid>

• RadzenDataGridColumn : RadzenDataGrid의 각 열을 정의하는 컴포넌트
• 각 열에 Property 속성을 사용하여 데이터 속성을 연결
• TextAlign 속성으로 텍스트 정렬을 설정

<RadzenDataGridColumn TItem="KakaoDiscondMng" Property="Fruit" TextAlign="TextAlign.Center" Title="상품 명" Width="200px">
    <Template Context="data">
        <div>@SelectedItem.ItemName</div>
    </Template>
</RadzenDataGridColumn>

• Template을 사용한 사용자 정의 표시
• 각 열에 대해 더 복잡한 UI를 정의
• Context 속성은 해당 행의 데이터를 나타냄

<Template Context="data">
    <RadzenNumeric @bind-Value=@data.Price Format="#,###원" ShowUpDown=false TextAlign="TextAlign.End"></RadzenNumeric>
</Template>

• RadzenDatePicker : 날짜를 선택할 수 있는 입력 필드
• @bind-Value 속성으로 선택된 날짜를 바인딩
• DateFormat 속성으로 날짜 형식을 지정

<RadzenDatePicker @bind-Value="@data.DisplyStartDate" DateFormat="yyyy년MM월dd일"></RadzenDatePicker>

• RadzenNumeric : 숫자를 입력하거나 편집할 수 있는 컴포넌트
• @bind-Value를 사용하여 숫자를 바인딩
• Format 속성으로 숫자의 형식을 지정
• ShowUpDown을 사용해 숫자 조정 버튼을 표시할지 여부를 설정

<RadzenNumeric @bind-Value=@data.KakaoCommission ShowUpDown=false TextAlign="TextAlign.End"></RadzenNumeric>