KendoReact License 적용 방법에 대해서 알아보도록 하겠습니다. KendoReact는 상용 라이선스로 개인/무제한 라이선스입니다. 구입 한 시점 ~ 1년 이내 버전에 대해서는 무제한으로 사용할 수 있습니다. 따라서 최신 버전의 KendoReact를 사용하기 위해서는 라이선스를 지속적으로 구매해야 하며, 이 경우 아래와 같이 할인이 적용됩니다.

KendoReact를 사용하기 위해서는 KendoReact 라이선스나 React, Angular, Vue, jQuery를 사용할 수 있는 Kendo UI 라이선스를 구매해야 합니다. 해당 라이선스를 구매하지 않는다면 사용하는 데 큰 문제는 없으나 아래 그림과 같이 라이선스가 유효하지 않다는 워터마크가 화면에 출력됩니다.

KendoReact License 구매와 관련해서 Pricing 페이지를 참고하시길 바랍니다.

KendoReact Trial License

KendoReact 홈페이지 가입하면 30일 동안 유효한 라이선스를 사용할 수 있습니다. 로그인 후 Account View 페이지에서 Trials를 클릭하고 KendoReact 또는 Kendo UI 라이선스를 활성화 하면 됩니다.

다시 Trials 메뉴에 들어가면 아래와 같이 KendoReact Trial License가 활성화 된 것을 확인할 수 있습니다.

License 활성화 하기

DOCS & DEMOS 메뉴 하위에 Project Setup 페이지에서 라이선스 파일을 다운로드 받을 수 있습니다.

다운로드 받은 License 파일을 프로젝트 루트 폴더에 kendo-ui-license.txt 파일로 복사합니다. 그리고 License를 활성화 합니다.

## license 모듈 설치
npm install --save @progress/kendo-licensing

## license 활성화
npx kendo-ui-license activate

마치며..

KendoReact 라이선스에 대해서 알아보았습니다. Trial 기간 동안 충분히 사용해보고 구매를 선택하는 것도 나쁘지 않는 선택인 것 같습니다.

지원 버전

KendoReact 지원 사양은 다음과 같습니다 :

• React 18 버전 권고 ( 16.8.x 이상 지원 )
• NodeJS 18.17.1 버전 권고 ( 14 이상 지원 )

만약 새롭게 KendoReact 앱을 개발한다면 React 18 버전에 NodeJS LTS 버전을 추천합니다. 저는 React 18 버전 및 NodeJS 20.17.0 버전을 사용하겠습니다. ( 24년 09월 기준 )

KendoReact 앱 생성

KendoReact 앱 생성하기

KendoReact 앱은 create-kendoreact-app 도구를 사용하여 쉽고 빠르게 KendoReact 앱을 생성할 수 있습니다. 앱 생성에 필요한 정보를 입력하면 자동으로 KendoReact 앱을 생성합니다. :

• 프로젝트 이름
• TypeScript 사용 여부
• SASS 사용 여부
• Kendo UI 테마 선택 ( default, bootstrap, material )

create-kendoreact-app 도구를 통해서 앱을 생성해보겠습니다.

npx create-kendoreact-app
? What is the name of your project? my-first-app
? Do you want to use TypeScript? Yes
? Do you want to use SASS? Yes
? Which Kendo UI Theme do you want to use? default

또는 다음과 같이 한번에 입력해도 됩니다.

npx create-kendoreact-app my-frist-app --typescript --sass --theme=default

아래 그림과 같이 my-first-app 폴더를 생성 후 필요한 패키지를 설치합니다.

KendoReact 앱 실행하기

이제 KendoReact 앱이 정상적으로 생성되었고 실행되는지 확인해보겠습니다.

cd my-first-app
npm start

다음과 같이 브라우저에서 http://localhost:3000/ 접속 시 아래와 같이 표시되면 정상적으로 KendoReact 앱이 생성된 것입니다.

기존 프로젝트에 KendoReact 사용하기

기존 프로젝트에서 KendoReact를 사용하기 위해서는 필요한 컴포넌트를 설치하거나 전체 컴포넌트를 미리 설치하여 사용할 수 있습니다.

필요한 컴포넌트 추가하기

KendoReact 공식 사이트에서 문서 및 데모 페이지에서 각 컴포넌트에 대한 자세한 설명과 데모 그리고 필요한 패키지를 잘 기술하고 있습니다. 해당 패키지를 설치하고 사용하면 됩니다.

예를 들어 Data Grid를 사용하고 싶으면 Data Grid Overview 페이지에 가면 필요한 패키지를 확인할 수 있습니다.

# Data Grid 설치하기
npm i @progress/kendo-react-grid

모든 컴포넌트 추가하기

KendoReact의 모든 컴포넌트를 추가히기 위해서는 모든 패키지를 수동으로 설치하거나 KendoReact 앱을 만들고 해당 프로젝트에서 package.json에 있는 @progress로 시작하는 모든 패키지를 복사, 기존 package.json에 추가하고 패키지를 업데이트하는 방법이 있습니다.

사용법

Data Grid를 예제로 간단하게 사용법에 대해서 알아보겠습니다.

Data Grid를 사용하기 위해서는 @progress/kendo-react-grid를 import 해야 합니다.

그리고 도움말을 참고해서 Grid를 생성하고 데이터를 바인딩하면 됩니다.

import React from "react";
import "./App.scss";

import { Grid, GridColumn } from "@progress/kendo-react-grid";

const products = [
  {
    ProductID: 1,
    ProductName: "Tea",
    CategoryID: 1,
    QuantityPerUnit: "10 boxes x 20 bags",
    UnitPrice: 18.0,
    UnitsInStock: 39,
    Discontinued: false,
  },
  {
    ProductID: 7,
    ProductName: "Dried Pears",
    CategoryID: 7,
    QuantityPerUnit: "12 - 1 lb pkgs.",
    UnitPrice: 30.0,
    UnitsInStock: 15,
    Discontinued: false,
  },
];

function App() {
  return (
    <div className="App">
      <Grid data={products}>
        <GridColumn field="ProductName" />
        <GridColumn field="UnitPrice" />
        <GridColumn field="UnitsInStock" />
        <GridColumn field="Discontinued" />
      </Grid>
    </div>
  );
}

export default App;

마치며

간단하게 KendoReact 앱을 생성해보았습니다. 이제 KendoReact UI Component를 사용하여 쉽고 빠르게 React 앱을 만들어보시기 바랍니다.

참고 자료

KendoReact는 입력 폼, 데이터 그리드, 차트, 텍스트 편집기와 같이 비즈니스 애플리케이션에서 필요한 다양한 UI 컴포넌트를 제공합니다. 또한 KendoReact는 Kendo UI에서 제공하는 기본 테마뿐만 아니라 Material, Bootstrap, Fluent와 같이 다양한 테마를 제공합니다. 그리고 사용자가 간단하게 테마를 변경할 수 있도록 도구를 제공합니다.

이러한 컴포넌트를 사용하여 쉽고 빠르게 UI 개발을 할 수 있습니다.

KendoReact 소개

KendoReact는 Fiddler로 유명한 Telerik 社에서 제공하는 UI 컴포넌트 라이브러리 중 하나로 React를 사용하여 비즈니스 애플리케이션을 빠르게 개발하기 위해 설계된 UI 라이브러리입니다.

KendoReact는 입력 폼, 데이터 그리드, 차트, 텍스트 편집기와 같이 비즈니스 애플리케이션에서 필요한 다양한 UI 컴포넌트를 제공합니다. 또한 KendoReact는 디자인과 관련하여 Kendo UI에서 제공하는 기본 테마뿐만 아니라 Material, Bootstrap, Fluent와 같이 다양한 테마를 제공합니다. 그리고 사용자가 간단하게 테마를 변경할 수 있도록 도구를 제공합니다.

이러한 컴포넌트를 사용하여 쉽고 빠르게 UI 개발을 할 수 있습니다.

보다 자세한 소개는 KendoReact 홈페이지를 참고하시기 바랍니다.

KendoReact 가격 정보

KendoReact를 사용할 수 있는 버전은 크게 3개 버전이 있습니다.

• KendoReact : React 사용 가능
• Kendo UI : React, jQuery, Angular, Vue 사용 가능
• DevCraft Complete : React, jQuery, Angular, Vue 이외에도 .Net Framework 등에서 사용 가능

KendoReact에서도 지원 형태에 따라서 가격 정보다 다릅니다.

• Lite Support : $899 (72h response time, 10 support incidents)
• Priority Support : $999 (24h response time, Unlimited number of support incidents)
• Ultimate Support : $1,399 (24h response time, Unlimited number of support incidents, etc)

KendoReact 라이선스 구매 시 1년동안 유효(최신 버전 다운로드 및 지원)하며, 사이트 제한은 없습니다. 유효기간이 만료되어도 유효기간 내에 릴리스된 버전은 사용할 수 있으며, 유효기간 만료 이후에 릴리스된 버전은 사용할 수 없습니다.

KendoReact 주요 특징

다른 UI 프레임워크가 모바일 중심으로 되어 있다면 KendoReact 컴포넌트는 데이터를 기반으로한 비즈니스 애플리케이션에 최적화된 컴포넌트를 제공합니다. 다만 비즈니스 애플리케이션 용도로 나와 있다보니 무료 버전은 존재하지 않으며 무조건 라이선스를 구입해서 사용해야합니다.

또한 다른 컴포넌트에 비해 데모와 문서화가 잘 되어 있어, 초보자도 쉽게 사용할 수 있습니다.

마치며

KendoReact에 대해서 간단하게 알아보았습니다. 앞으로 KendoReact 관련 포스트에서는 공식 사이트에서 제공하는 데모를 중심으로 실제 개발하면서 사용한 다양한 방식에 대해서 예제 형식으로 자세히 다뤄보겠습니다.