React 컴포넌트

• Wijmo는 React 15.0.0 이상 버전을 지원합니다.

Wijmo의 React 컴포넌트를 사용하면, React JSX 문법 내에서 Wijmo 컨트롤을 사용할 수 있습니다. React용 Wijmo 컴포넌트는 해당 Wijmo 컨트롤을 감싸는 래퍼 컴포넌트입니다.

컴포넌트는 내부적으로 Wijmo 컨트롤을 생성하고, 생성된 컨트롤 인스턴스를 control 속성을 통해 참조할 수 있게 제공합니다. 또한, JSX 문법 안에서 Wijmo 컨트롤의 속성과 이벤트를 선언적으로 바인딩할 수 있습니다.

Wijmo React 컴포넌트 설치

Wijmo React 컴포넌트는 각 핵심 라이브러리 패키지마다 별도의 npm 패키지로 제공됩니다. 패키지 이름에는 "react"가 포함되어 있습니다.

예를 들어, "wijmo.react.grid" 패키지는 핵심 "wijmo.grid" 라이브러리의 컨트롤을 위한 컴포넌트를 제공합니다.

각 패키지는 개별 설치하거나, "@mescius/wijmo.react.all" 패키지를 통해 한 번에 설치할 수 있습니다:

npm install @mescius/wijmo.react.all

Wijmo npm 패키지에 대한 더 자세한 내용은 관련 문서를 참고 부탁드립니다.

Wijmo 모듈 가져오기

설치 후에는 ESM import 문법을 사용하여 모듈을 가져올 수 있습니다.

import * as wjcGrid '@mescius/wijmo.react.grid';

Wijmo 컴포넌트 가져오기

이제 가져온 모듈을 사용하여 React 컴포넌트 안에 Wijmo 컨트롤을 추가할 수 있습니다.

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 패키지로 제공됩니다. 두 가지 주요 CSS 파일이 있습니다.

• wijmo.css : 모든 Wijmo 컨트롤에 대한 스타일 포함

• wijmo-core.css : 엔터프라이즈 컨트롤 스타일이 포함되지 않은 wijmo.css의 개별 버전입니다.

이 ESM import 문을 사용하여 애플리케이션의 .jsx/.js 루트 파일에 스타일을 로드할 수 있습니다.

import '@mescius/wijmo.styles/wijmo.css';

React JSX 구문

Wijmo React 컴포넌트는 JSX 문법에서도 일관된 명명 규칙을 사용합니다.

컨트롤이 가진 속성과 이벤트 이름은 원래 JavaScript 컨트롤과 동일하게 노출됩니다.

return (
  <div>
    <wjcInput.InputNumber
      value={amount}          // 속성 바인딩
      format="n0"             // 문자열 바인딩
      isReadOnly={true}       // boolean 바인딩
      valueChanged={valueChanged} // 이벤트 바인딩
    />
  </div>
);

이벤트 바인딩 세부 사항

Wijmo 이벤트 핸들러는 sender와 eventArgs 두 개의 매개변수를 가집니다.

컴포넌트 이벤트에 바인딩할 때는 이 두 매개변수를 받는 함수 이름을 지정해주어야 합니다.

const [amount, setAmount] = React.useState(0);

const onValueChanged = (sender, args) => {
  setAmount(sender.value);
};

return (
  <div>
    <wjcInput.InputNumber
      value={amount}
      valueChanged={onValueChanged}
    />
  </div>
);

"초기화(initialized)" 이벤트

모든 Wijmo React 컴포넌트에는 initialized 이벤트가 있습니다.

이 이벤트는 컨트롤이 페이지에 추가되고 초기화가 완료된 후 발생합니다.

JSX 속성 설정 외에도 추가적인 초기화 작업을 수행할 때 사용할 수 있습니다.

const initGrid = (grid, args) => {
  grid.mergeManager = new CustomMerge(grid);
};

return (
  <div>
    <wjcGrid.FlexGrid initialized={initGrid} />
  </div>
);

코드에서 Wijmo 컨트롤 만들기

Wijmo React 컴포넌트는 JSX 내 사용을 목적으로 설계되었습니다.

코드로 Wijmo 컨트롤을 직접 생성해야 하는 경우에는 React용 컴포넌트가 아닌 기본 Wijmo 모듈을 사용해야 합니다.

기본 모듈 이름은 React interop 모듈 이름에서 "react"를 뺀 형태입니다.

import { FlexGrid } from "@mescius/wijmo.grid";
let flex = new FlexGrid("#host_element");