Ignite UI for React 시작하기

    Ignite UI for ReactInfragistics React을 위한 완전한 UI 위젯, 컴포넌트, Sketch UI 키트 세트입니다. 개발자들은 데스크톱 브라우저, 모바일 경험, 그리고 프로그레시브 웹 앱(PWA)을 위한 현대적이고 고성능 HTML5 및 JavaScript 앱을 구축할 수 있습니다.

    Ignite UI for React 포함된 구성 요소와 서비스에 따라 MIT 또는 상업용 라이선스 하에 제공되는 여러 패키지로 구성되어 있습니다. 구성 요소와 라이선스에 대한 자세한 목록은 라이선스 FAQ와 설치 및 오픈 소스 대 프리미엄 주제를 참고해 주세요.

    Prerequisites

    1. NodeJS를 설치합니다.
    2. 비주얼 스튜디오 코드를 설치합니다.

    Using Ignite UI CLI

    애플리케이션을 처음부터 만들고 Ignite UI React 사용하도록 설정하려면 Ignite UI CLI를 사용할 수 있습니다. 첫 번째 단계는 해당 패키지를 다음과 같이 전역적으로 설치하는 것입니다:

    npm install -g igniteui-cli

    이용 가능한 옵션들을 안내해 경험하고 싶다면, 새로운 애플리케이션을 만들고 설정하는 데 도움이 되는 단계별 모드를 초기화할 수 있습니다. 가이드를 시작하려면 다음 명령을 실행ig 하세요:

    ig

    그 다음 프레임워크React와 프로젝트 유형으로 선택Ignite UI for React TS 하세요. 프로젝트 템플릿을Default Top Navigation 선택하고, 특정 컴포넌트/뷰를 추가하거나, 선택하세요Complete & Run. Ignite UI CLI에 대한 자세한 내용은 CLI 개요를 참조하세요.

    프롬프트 중에 그리드 컴포넌트를 추가했다면, 애플리케이션이 실행되면 다음과 같은 현상이 나타날 것입니다:

    [!NOTE] Keep in mind that by default Ignite UI CLI installs the Trial version of Ignite UI for React's Grid component which is under commercial license.

    또는 React 팀이 권장하는 Next.js, Vite, Expo와 같은 인기 있는 프레임워크를 사용할 수도 있습니다. 다음은 이러한 방법 중 하나를 사용해 Ignite UI for React React 애플리케이션을 만드는 단계별 지침입니다.

    Using Vite CLI

    Creating a New React Project

    React 개발을 위한 모든 인기 프레임워크는 React 애플리케이션을 스캐폴딩하기 위한 강력한 CLI 도구를 제공합니다.

    1 -VS Code를 열고 터미널 메뉴를 선택한 다음 새 터미널 옵션을 선택합니다.

    2 - 터미널 창에 다음 명령어를 입력하세요:

    npm create vite@latest

    그 다음 프로젝트 이름, 프레임워크 React, TypeScript 사용 여부 및 Vite에서 제공하는 다양한 옵션을 선택하는 안내를 따라가세요. React 신청서를 보일러플레이트로 만드는 다양한 방법에 대한 자세한 내용은 이 주제를 참고해 주세요.

    Adding an Ignite UI React Grid Component

    패키지 설치

    Ignite UI React Grid 컴포넌트를 앱에 추가하려면 다음 패키지를 설치igniteui-react-grids 해야 합니다:

    npm install igniteui-react-grids --save

    컴포넌트 모듈 가져오기

    그 후 사용하려는 컴포넌트의 필요한 모듈을 가져올 수 있습니다. 템플릿에서 사용할 그리드와 컬럼 컴포넌트에 대해서도 이 작업을 해보겠습니다. 또한 테마 중 하나를 가져와야 합니다.

    import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';

    컴포넌트 사용

    이제 마크업에 이 Ignite UI for React 그리드 요소를 사용할 준비가 되었습니다! 정의해 보겠습니다:

    // App.txs
function App() {
  const data = [
    { name: "John", age: 30 },
    { name: "Jane", age: 25 },
    { name: "Bob", age: 35 }
  ];

  return (
    <div style={{ height: "100%", width: "100%" }}>
      <IgrGrid
        data={data}
        autoGenerate={false}>
        <IgrColumn
          field="name"
          header="Name"
          dataType="string">
        </IgrColumn>
        <IgrColumn
          field="age"
          header="Age"
          dataType="number">
        </IgrColumn>
      </IgrGrid>
    </div>
  );
}

    Running Application

    마지막으로, 새로운 애플리케이션을 실행할 수 있습니다:

    npm run dev

    이 명령을 실행하면 프로젝트가 컴퓨터에서 로컬에서 빌드되고 서비스됩니다. 기본 브라우저에서 자동으로 열리며, 프로젝트에서 Ignite UI for React 컴포넌트를 사용할 수 있습니다. 최종 결과는 샘플 데이터가 포함된 데이터 그리드를 보여야 합니다:

    Updating Existing Apps

    기존의 React CLI 프로젝트에서 Ignite UI for React을 사용하고 싶다면, 저희가 도와드립니다! 다음 명령어만 실행하면 됩니다:

    npm install --save igniteui-react
npm install --save igniteui-react-charts igniteui-react-core
npm install --save igniteui-react-excel igniteui-react-core
npm install --save igniteui-react-gauges igniteui-react-core
npm install --save igniteui-react-grids igniteui-react-core
npm install --save igniteui-react-maps igniteui-react-core
npm install --save igniteui-react-spreadsheet igniteui-react-core

    또는

    yarn add igniteui-react-charts igniteui-react-core
yarn add igniteui-react-excel igniteui-react-core
yarn add igniteui-react-gauges igniteui-react-core
yarn add igniteui-react-grids igniteui-react-core
yarn add igniteui-react-maps igniteui-react-core
yarn add igniteui-react-spreadsheet igniteui-react-core

    이렇게 하면 기존 프로젝트에 대한 Ignite UI for React 패키지와 모든 종속성, 글꼴 가져오기 및 스타일 참조가 자동으로 설치됩니다.

    Ignite UI for React 패키지 개요

    Ignite UI for React는 React를 위한 포괄적인 UI 구성 요소, 디자인 툴킷 및 지원 서비스 제품군입니다. 개발자가 데스크톱 브라우저, 모바일 경험 및 프로그레시브 웹 앱(PWA)을 위한 최신 고성능 React 애플리케이션을 만들 수 있도록 구축된 Ignite UI for React는 최신 React 모범 사례와 API를 활용합니다.

    Charts & Graphs

    Ignite UI for React 에는 65+ 종류의 차트 시리즈와 조합을 통해 모든 종류의 데이터를 시각화할 수 있는 차트 및 그래프 라이브러리가 포함되어 있어 멋지고 인터랙티브한 차트와 대시보드를 만들 수 있습니다. 속도와 아름다움을 위해 만들어졌고, 모든 최신 브라우저에서 작동하도록 설계되었으며, 완전한 터치와 상호작용을 지원해 어떤 기기에서든 빠르게 반응형 비주얼을 만들 수 있습니다.

    게이지

    Ignite UI for React 데이터를 쉽고 직관적으로 설명할 수 있도록 방사형 게이지, 선형 계기, 불릿 그래프 구성 요소를 제공합니다. 방사형 게이지은 미리 정의된 형태와 축척을 만들기 위한 다양한 커스터마이징 옵션을 제공합니다. 선형 계기은 저울과 하나 이상의 범위와 비교한 값의 간단한 뷰를 제공합니다. 하나의 척도, 하나의 체크 표시 세트, 그리고 하나의 라벨 세트를 지원합니다. 불릿 그래프 컴포넌트는 대시보드에서 사용되는 미터와 게이지를 단순한 막대 차트로 대체하는 데이터 시각화를 가능하게 합니다.

    지도

    Ignite UI for React 지리지도 구성 요소는 애플리케이션 내에서 지리 데이터를 시각화할 수 있는 기능을 제공합니다. 이 도구는 여러 지리적 위치로 구성된 데이터 세트를 마커, 선, 다각형, 심지어 인터랙티브 비트맵 형태로 렌더링할 수 있습니다. 여러 지도 레이어에 지리 데이터를 겹쳐 놓고, 특정 지리적 위치를 표시하며, 맞춤형 마커와 색상으로 정보를 표시할 수 있습니다.

    Grids & Inputs

    Ignite UI for React 는 Grid Lite (MIT 라이선스 하의 경량형 그리드 컴포넌트), Data Grid (상업용 라이선스 기능의 풍부한 그리드 컴포넌트), List, Tree, 심지어 스프레드시트 등 다양한 형태로 데이터를 거의 설정하지 않고 바인딩하고 표시할 수 있는 여러 Grid 컴포넌트를 제공합니다.

    Buttons, Inputs, Layouts, and Menus

    Ignite UI for React 다양한 종류의 버튼, 입력, 메뉴, 레이아웃을 제공하여 캡슐화와 의존성 없는 재사용 컴포넌트 개념을 활용해 현대적인 웹 애플리케이션을 구축할 수 있게 합니다. 스토리북은 여기에서 확인할 수 있습니다. 이 구성 요소들은 Indigo Design System를 기반으로 하며, App Builder에서 완전히 지원하고 Sketch, Adobe XD, Figma 용 즉시 사용 가능한 UI 키트로 뒷받침됩니다.