Kendo UI란?

Jisoo Choi·2022년 8월 18일

Kendo html5

Kendo UI

Telerik에서 개발/배포
HTML5, CSS3로 개발된 Javascript UI 라이브러리
- Javascript 표준을 준수하고, HTML5로 개발되어서 그래프 기능이 탁월함 :)
jQuery용 라이브러리와 Vue, React, Angular 프레임워크를 지원
여러 기능들을 지원 (Grid, Editors, DropDowns, Navigation, Layout, Charts, etc..)

🍳 사용하는 이유?

사용자가 선택한 라이브러리의 front-end 프로젝트에 편리하게 UI 구성 요소를 추가할 수 있음

Kendo React 사용하기

🥕 프로젝트 생성 후 테마 설정

Default theme—Available through the @progress/kendo-theme-default NPM module.
Bootstrap theme—Available through the @progress/kendo-theme-bootstrap NPM module.
Material theme—Available through the @progress/kendo-theme-material NPM module.

🥕 패키지 설치

npm install --save @progress/kendo-theme-default

✋ 적용

import '@progress/kendo-theme-default/dist/all.css';

class App extends React.Component {
    render() {
        return (
            <h1>My First KendoReact App</h1>
            <Button primary={true}>
                My Button with KendoReact styles
            </Button>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

이 외의 원하는 UI 요소가 있으면 npm 패키지를 설치해서 사용한다. 예를 들어, 달력 컴포넌트를 사용하고 싶다면 아래와 같이 설치한다!
npm install --save @progress/kendo-react-dateinputs @progress/kendo-react-intl @progress/kendo-licensing

✋ 적용

import { Calendar } from '@progress/kendo-react-dateinputs';


render() {
  return (
    <div className="App">
      <h1>Hello KendoReact!</h1>
      <Calendar/>   {/* 사용할 kendo ui 컴포넌트 */}
    </div>
  );
}

Reference

Jisoo Choi

👩‍🚀 No worries! Just record

이전 포스트

[Linux] CORS 설정 방법

다음 포스트