React 구성요소

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

React용 Wijmo 컴포넌트를 사용하면 React JSX 문법으로 Wijmo 컨트롤을 사용할 수 있습니다. Wijmo React 컴포넌트는 자신이 표현하는 Wijmo 컨트롤을 감싸는 래퍼(wrapper)입니다. 컴포넌트는 내부적으로 Wijmo 컨트롤을 생성하며, control 속성을 통해 해당 컨트롤 인스턴스에 대한 참조를 제공합니다. 또한 React JSX 문법을 사용하여 컨트롤의 속성과 이벤트를 선언적으로 바인딩할 수 있습니다.

Wijmo React 컴포넌트는 npm 패키지 세트로 제공되며, 각 코어 라이브러리 패키지마다 하나의 패키지가 존재하고 이름에 “react”가 포함됩니다. 예를 들어, “wijmo.react.grid” 패키지는 코어 “wijmo.grid” 패키지에 포함된 컨트롤에 대한 컴포넌트를 제공합니다. 패키지는 개별적으로 설치할 수도 있고, “@mescius/wijmo.react.all” 그룹 패키지를 사용하여 한 번에 모두 설치할 수도 있습니다.

npm install @mescius/wijmo.react.all

Wijmo npm 패키지에 대한 자세한 내용은 관련 항목을 참고하시기 바랍니다.

이후에는 ESM import 문을 사용하여 모듈을 가져올 수 있습니다. 예를 들어, 특정 import 문은 “wijmo.react.grid” 모듈의 내용을 가져옵니다.

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

Wijmo 컴포넌트 가져오기

이와 같은 설정을 통해 Wijmo React 모듈을 가져오고, 그 안에 포함된 컴포넌트를 사용할 수 있습니다. 예를 들어, 특정 코드는 App 컴포넌트의 JSX에 FlexGrid 컴포넌트를 추가합니다.

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: Enterprise 컨트롤 스타일을 제외한 wijmo.css의 축약 버전

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

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

React JSX 문법

Wijmo React 컴포넌트는 JSX 문법에서 일관된 네이밍 규칙을 사용합니다. 내부적으로 대응되는 JavaScript 컨트롤과 동일한 이름의 속성을 제공하여, 속성 및 이벤트 바인딩을 수행할 수 있습니다.

return (
  <div>
    <wjcInput.InputNumber
      value={amount} // binding to a component property 
      format="n0" // binding to a string
      isReadOnly={true} // binding to boolean
      valueChanged={valueChanged} // event binding
    /> 
  </div>
);

이벤트 바인딩 상세

Wijmo 이벤트 핸들러는 sender와 event argument 두 개의 매개변수를 가지는 함수로 정의됩니다. 컴포넌트 이벤트에 바인딩할 때는 이 시그니처를 갖는 함수 이름을 바인딩 소스로 지정해야 합니다.

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에서 속성을 설정하는 것 외에 추가적인 초기화 작업을 수행할 때 사용할 수 있습니다. 이벤트 핸들러의 시그니처는 다른 Wijmo 이벤트 핸들러와 동일합니다.

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

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

코드에서 Wijmo 컨트롤 생성하기

React용 Wijmo 컴포넌트는 React JSX에서 사용하는 것을 목적으로 설계되었습니다. 만약 코드에서 직접 Wijmo 컨트롤을 생성하려면, React 컴포넌트가 아닌 코어 모듈에 포함된 Wijmo 컨트롤을 사용해야 합니다. 코어 모듈의 이름은 대응되는 React 인터롭 모듈과 동일하지만, 이름에 “react”가 포함되지 않습니다.

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