# React에서 Wijmo 사용하기

## Content

React 용 Wijmo *컴포넌트*를 사용하면 React JSX 구문에서 Wijmo *컨트롤* 를 사용할 수 있습니다. Wijmo React *컴포넌트* 는 Wijmo *컨트롤*을 나타내는 래퍼입니다. *Component*는 백그라운드에서 Wijmo *컨트롤*을 만들고 **control** 속성을 통해 컨트롤 인스턴스에 대한 참조를 제공합니다. *컴포넌트* 를 사용하면 React JSX 구문에서 *컨트롤* 속성 및 이벤트에 선언적으로 바인딩할 수 있습니다 .

**참고** npm에서 설치하는 것 외에도 [Wijmo Dev Kit을 다운로드](https://www.grapecity.co.kr/download/wijmo-enterprise)하는 것을 적극 권장합니다. 개발 키트에는 소스 코드, 참조 앱 등이 포함된 수백개의 샘플이 포함되어 있습니다.

## 설치

Wijmo React 컴포넌트는 이름에 "react"라는 단어가 있는 코어 라이브러리 패키지 당 하나의 패키지인 npm 패키지 세트로 제공됩니다. 예를 들어 "wijmo.react.grid" 패키지는 핵심 "wijmo.grid"패키지의 컨트롤 컴포넌트 요소를 나타냅니다. "@mescius/wijmo.react.all" 그룹 패키지를 사용하여 패키지를 개별적으로, 또는 함께 설치할 수 있습니다.

```auto
npm install @mescius/wijmo.react.all
```

## Wijmo 리액트 컴포넌트 가져오기

이 설정을 사용하면 Wijmo React 모듈을 가져와 이 모듈에 포함된 구성 요소를 사용할 수 있습니다. 예를 들어, 이 코드는 App 구성 요소의 JSX에 FlexGrid 구성 요소를 추가합니다.

```javascript
import * as React from 'react';
import * as wjcGrid from '@mescius/wijmo.react.grid';

const App: React.FC = () => {
  const [data, setData] = React.useState(getData());

  return <wjcGrid.FlexGrid itemsSource={data} />
}
```

## Wijmo css 추가하기

Wijmo 컨트롤이 올바르게 작동하려면 응용프로그램에 Wijmo css 스타일을 로딩해야 합니다.
이 스타일은 **@mescius/wijmo.styles** npm 패키지로 부터 가져옵니다.

다음 ESM import 문을 사용하여, 응용프로그램의 .jsx/.js 루트 파일에 스타일을 로드할 수 있습니다.

```javascript
import "@mescius/wijmo.styles/wijmo.css";
```

## 더 많은 React 설명

React 애플리케이션에서 Wijmo 사용에 대한 자세한 정보는 [React 컴포넌트](https://demo.mescius.co.kr/wijmo/docs/GettingStarted/React-Components) 주제를 참조하십시오.