KendoReact 시작하기

이번 글에서는 KendoReact로 앱을 만드는 데 필요한 구성 요소에 대해서 알아보고 간단하게 KendoReact 앱을 만들어 보겠습니다.

지원 버전

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

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

만약 새롭게 KendoReact 앱을 개발한다면 React 18 버전에 NodeJS LTS 버전을 추천합니다.

저는 React 18 버전 및 NodeJS 20.9.0 버전을 사용하겠습니다. ( 23년 11월 05일 기준 )

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 해야 합니다. ( 4번째 줄 )

그리고 도움말을 참고해서 Grid를 생성하고 데이터를 바인딩하면 됩니다. ( 30번째 ~ 35번째 줄 )

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;

참고

▷ Getting Started with KendoReact : https://www.telerik.com/kendo-react-ui/components/getting-started/