Namespace: $react

넥사크로 환경에서 React 기반 렌더링을 지원하는 네임스페이스. 전역 객체 $react를 통해 접근할 수 있습니다.

Source: utils/react-nexacro/index.js, line 1

Example

// 1. 기본 사용법 (전역 객체 활용)
const { React, createNexacroRoot, NxDiv, NxButton, NxStatic } = $react;

function MyApp() {
    const [count, setCount] = React.useState(0);
    return React.createElement(
        NxDiv,
        { left: 0, top: 0, width: 400, height: 300 },
        React.createElement(NxStatic, {
            left: 10,
            top: 10,
            width: 200,
            height: 30,
            text: `count: ${count}`,
        }),
        React.createElement(NxButton, {
            left: 10,
            top: 50,
            width: 100,
            height: 30,
            text: "증가",
            onClick: () => setCount((c) => c + 1),
        }),
    );
}

// 넥사크로 Form의 onload 이벤트 등에서 호출
const root = createNexacroRoot(this.div_container);
root.render(React.createElement(MyApp));

// 2. 데이터셋 연동 예시
const { useNexacroDataset, NxGrid } = $react;

function MyGrid() {
    // 데이터셋 변경 감지 및 리렌더링 구독
    const ds = useNexacroDataset(this.ds_list);

    return React.createElement(NxGrid, {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        binddataset: ds.name,
    });
}

Methods

(static) NxButton(props) → {React.ReactElement}

넥사크로 Button 컴포넌트.

Parameters:

Name Type Description

props

Object

Properties

Name	Type	Attributes	Description
`text`	string	<optional>	버튼 텍스트
`onClick`	function	<optional>	클릭 이벤트 핸들러 `(obj, e) => void`

Source: utils/react-nexacro/components.js, line 102

Returns:

Type:: React.ReactElement

Example

<NxButton
    id="btn_ok"
    left={10}
    top={50}
    width={80}
    height={30}
    text="확인"
    onClick={(obj, e) => {
        nexacro.alert("클릭!");
    }}
/>;

(static) NxCalendar(props) → {React.ReactElement}

넥사크로 Calendar 컴포넌트 (날짜 선택).

Parameters:

Name Type Description

props

Object

Properties

Name	Type	Attributes	Description
`value`	string	<optional>	현재 날짜 값 (YYYYMMDD)
`onChanged`	function	<optional>	날짜 변경 이벤트 `(obj, e) => void`

Source: utils/react-nexacro/components.js, line 237

Returns:

Type:: React.ReactElement

Example

<NxCalendar
    id="cal_date"
    left={10}
    top={10}
    width={120}
    height={24}
    value={date}
    onChanged={(obj, e) => setDate(e.postvalue)}
/>;

(static) NxCheckBox(props) → {React.ReactElement}

넥사크로 CheckBox 컴포넌트.

Parameters:

Name Type Description

props

Object

Properties

Name	Type	Attributes	Description
`text`	string	<optional>	체크박스 레이블
`value`	string	<optional>	현재 값 ("1"/"0" 또는 checkedvalue/uncheckedvalue)
`onChanged`	function	<optional>	값 변경 이벤트 `(obj, e) => void`

Source: utils/react-nexacro/components.js, line 180

Returns:

Type:: React.ReactElement

Example

<NxCheckBox
    id="chk_agree"
    left={10}
    top={10}
    width={150}
    height={24}
    text="동의합니다"
    value={agreed ? "1" : "0"}
    onChanged={(obj, e) => setAgreed(e.postvalue === "1")}
/>;

(static) NxCombo(props) → {React.ReactElement}

넥사크로 Combo 컴포넌트 (드롭다운 선택).

Parameters:

Name Type Description

props

Object

Properties

Name	Type	Attributes	Description
`value`	string	<optional>	현재 선택 값
`codecolumn`	string	<optional>	코드 컬럼명
`datacolumn`	string	<optional>	표시 컬럼명
`onItemChanged`	function	<optional>	항목 변경 이벤트 `(obj, e) => void`
`onDropDown`	function	<optional>	드롭다운 열림 이벤트 `(obj, e) => void`

Source: utils/react-nexacro/components.js, line 208

Returns:

Type:: React.ReactElement

Example

<NxCombo
    id="cmb_dept"
    left={10}
    top={10}
    width={200}
    height={24}
    codecolumn="dept_cd"
    datacolumn="dept_nm"
    onItemChanged={(obj, e) => setDept(e.postvalue)}
/>;

(static) NxDiv(props) → {React.ReactElement}

넥사크로 Div 컴포넌트. 자식 컴포넌트를 포함할 수 있는 컨테이너.

Parameters:

Name Type Description

props

Object

Properties

Name	Type	Attributes	Description
`children`	React.ReactNode	<optional>

Source: utils/react-nexacro/components.js, line 25

Returns:

Type:: React.ReactElement

Example

<NxDiv left={0} top={0} width={400} height={300}>
    <NxButton
        id="btn"
        left={10}
        top={10}
        width={100}
        height={30}
        text="확인"
    />
</NxDiv>;

(static) NxEdit(props) → {React.ReactElement}

넥사크로 Edit 컴포넌트 (단일 행 입력).

Parameters:

Name Type Description

props

Object

Properties

Name	Type	Attributes	Description
`value`	string	<optional>	현재 값
`edittype`	string	<optional>	입력 타입 (normal, password, number 등)
`onChanged`	function	<optional>	값 변경 이벤트 `(obj, e) => void`

Source: utils/react-nexacro/components.js, line 129

Returns:

Type:: React.ReactElement

Example

<NxEdit
    id="edt_name"
    left={10}
    top={10}
    width={200}
    height={24}
    value={name}
    onChanged={(obj, e) => setName(e.postvalue)}
/>;

(static) NxGrid(props) → {React.ReactElement}

넥사크로 Grid 컴포넌트.

Parameters:

Name Type Description

props

Object

Properties

Name	Type	Attributes	Description
`binddataset`	string	<optional>	바인딩할 데이터셋 ID.

Source: utils/react-nexacro/components.js, line 287

Returns:

Type:: React.ReactElement

Example

<NxGrid
    id="grd_list"
    left={0}
    top={40}
    width={600}
    height={300}
    binddataset="ds_list"
/>;

(static) NxHBox(props) → {React.ReactElement}

수평(Horizontal)으로 자식들을 배치하는 박스 컨테이너.

Parameters:

Name Type Description

props

Object

Properties

Name	Type	Attributes	Default	Description
`reverse`	boolean	<optional>	false	역방향 배치 여부
`gap`	number \| string	<optional>	0	간격
`p`	number	<optional>	0	전체 여백
`px`	number	<optional>	0	좌우 여백
`py`	number	<optional>	0	상하 여백
`pt`	number	<optional>	0	상단 여백
`pb`	number	<optional>	0	하단 여백
`pl`	number	<optional>	0	좌측 여백
`pr`	number	<optional>	0	우측 여백

Source: utils/react-nexacro/layouts.jsx, line 326

Returns:

Type:: React.ReactElement

(static) NxImage(props) → {React.ReactElement}

넥사크로 Image 컴포넌트.

Parameters:

Name Type Description

props

Object

Properties

Name	Type	Attributes	Description
`src`	string	<optional>	이미지 경로

Source: utils/react-nexacro/components.js, line 331

Returns:

Type:: React.ReactElement

Example

<NxImage
    id="img_logo"
    left={10}
    top={10}
    width={100}
    height={50}
    src="images/logo.png"
/>;

(static) NxListBox(props) → {React.ReactElement}

넥사크로 ListBox 컴포넌트.

Parameters:

Name Type Description

props

Object

Properties

Name	Type	Attributes	Description
`binddataset`	string	<optional>	바인딩할 데이터셋 ID.
`onItemChanged`	function	<optional>	항목 변경 이벤트 `(obj, e) => void`

Source: utils/react-nexacro/components.js, line 377

Returns:

Type:: React.ReactElement

Example

<NxListBox
    id="lst_items"
    left={10}
    top={10}
    width={200}
    height={150}
    binddataset="ds_items"
    onItemChanged={(obj, e) => setItem(e.postvalue)}
/>;

(static) NxPanel(props) → {React.ReactElement}

넥사크로 Panel 컴포넌트. 자식 컴포넌트를 포함할 수 있는 패널 컨테이너.

Parameters:

Name Type Description

props

Object

Properties

Name	Type	Attributes	Description
`text`	string	<optional>	패널 제목 텍스트
`children`	React.ReactNode	<optional>

Source: utils/react-nexacro/components.js, line 51

Returns:

Type:: React.ReactElement

Example

<NxPanel id="pnl" left={0} top={0} width={400} height={300} text="패널 제목">
    <NxButton
        id="btn"
        left={10}
        top={10}
        width={100}
        height={30}
        text="확인"
    />
</NxPanel>;

(static) NxProgressBar(props) → {React.ReactElement}

넥사크로 ProgressBar 컴포넌트.

Parameters:

Name Type Description

props

Object

Properties

Name	Type	Attributes	Description
`value`	number	<optional>	현재 진행 값 (0~100)

Source: utils/react-nexacro/components.js, line 354

Returns:

Type:: React.ReactElement

Example

<NxProgressBar
    id="pgb_load"
    left={10}
    top={10}
    width={300}
    height={20}
    value={progress}
/>;

(static) NxSpin(props) → {React.ReactElement}

넥사크로 Spin 컴포넌트 (숫자 증감 입력).

Parameters:

Name Type Description

props

Object

Properties

Name	Type	Attributes	Description
`value`	string	<optional>	현재 값
`onChanged`	function	<optional>	값 변경 이벤트 `(obj, e) => void`

Source: utils/react-nexacro/components.js, line 262

Returns:

Type:: React.ReactElement

Example

<NxSpin
    id="spn_year"
    left={10}
    top={10}
    width={80}
    height={24}
    value={year}
    onChanged={(obj, e) => setYear(e.postvalue)}
/>;

(static) NxStack(props) → {React.ReactElement}

자식 컴포넌트들을 수직 또는 수평으로 배치하는 스택 컨테이너. 넥사크로의 상대 좌표계(id:gap)를 활용하여 동적으로 배치합니다.

Parameters:

Name Type Description

props

Object

Properties

Name	Type	Attributes	Default	Description
`direction`	'vertical' \| 'horizontal'	<optional>	"vertical"	배치 방향
`reverse`	boolean	<optional>	false	역방향 배치 여부
`gap`	number \| string	<optional>	0	자식 간의 간격(px)
`p`	number	<optional>	0	전체 여백
`px`	number	<optional>	0	좌우 여백
`py`	number	<optional>	0	상하 여백
`pt`	number	<optional>	0	상단 여백
`pb`	number	<optional>	0	하단 여백
`pl`	number	<optional>	0	좌측 여백
`pr`	number	<optional>	0	우측 여백

Source: utils/react-nexacro/layouts.jsx, line 3

Returns:

Type:: React.ReactElement

Example

React.createElement(
    NxStack,
    { direction: "vertical", gap: 10, left: 0, top: 0, width: 200 },
    React.createElement(NxButton, { text: "Button 1", height: 30 }),
    React.createElement(NxButton, { text: "Button 2", height: 30 }),
);

(static) NxStatic(props) → {React.ReactElement}

넥사크로 Static 컴포넌트 (레이블).

Parameters:

Name Type Description

props

Object

Properties

Name	Type	Attributes	Description
`text`	string	<optional>	표시할 텍스트

Source: utils/react-nexacro/components.js, line 79

Returns:

Type:: React.ReactElement

Example

<NxStatic
    id="lbl"
    left={10}
    top={10}
    width={200}
    height={24}
    text="안녕하세요"
/>;

(static) NxTab(props) → {React.ReactElement}

넥사크로 Tab 컴포넌트.

Parameters:

Name	Type	Description
`props`	Object

Source: utils/react-nexacro/components.js, line 310

Returns:

Type:: React.ReactElement

Example

React.createElement(NxTab, {
    id: "tab_main",
    left: 0,
    top: 0,
    width: 600,
    height: 400,
});

(static) NxTextArea(props) → {React.ReactElement}

넥사크로 TextArea 컴포넌트 (다중 행 입력).

Parameters:

Name Type Description

props

Object

Properties

Name	Type	Attributes	Description
`value`	string	<optional>	현재 값
`onChanged`	function	<optional>	값 변경 이벤트 `(obj, e) => void`

Source: utils/react-nexacro/components.js, line 155

Returns:

Type:: React.ReactElement

Example

<NxTextArea
    id="ta_memo"
    left={10}
    top={40}
    width={300}
    height={100}
    value={memo}
    onChanged={(obj, e) => setMemo(e.postvalue)}
/>;

(static) NxVBox(props) → {React.ReactElement}

수직(Vertical)으로 자식들을 배치하는 박스 컨테이너.

Parameters:

Name Type Description

props

Object

Properties

Name	Type	Attributes	Default	Description
`reverse`	boolean	<optional>	false	역방향 배치 여부
`gap`	number \| string	<optional>	0	간격
`p`	number	<optional>	0	전체 여백
`px`	number	<optional>	0	좌우 여백
`py`	number	<optional>	0	상하 여백
`pt`	number	<optional>	0	상단 여백
`pb`	number	<optional>	0	하단 여백
`pl`	number	<optional>	0	좌측 여백
`pr`	number	<optional>	0	우측 여백

Source: utils/react-nexacro/layouts.jsx, line 296

Returns:

Type:: React.ReactElement

(static) createNexacroRoot(container) → {NexacroRoot}

넥사크로 컴포넌트 트리의 렌더 루트를 생성합니다. React DOM의 createRoot와 유사한 인터페이스를 제공합니다.

Parameters:

Name	Type	Description
`container`	nexacro.Div \| nexacro.Form	렌더링 대상 넥사크로 컨테이너 (Div 또는 Form)

Source: utils/react-nexacro/root.js, line 11

Returns:

렌더링 및 해제를 위한 루트 객체

Type:: NexacroRoot

Example

const root = createNexacroRoot(this.div_container);
root.render(React.createElement(MyApp));

(static) useNexacroDataset(dataset) → {nexacro.Dataset}

넥사크로 데이터셋(Dataset)의 변경 이벤트를 구독하여, 데이터나 로우 포지션이 변경될 때마다 React 컴포넌트를 리렌더링하게 만드는 훅입니다.

Parameters:

Name	Type	Description
`dataset`	nexacro.Dataset	구독할 넥사크로 데이터셋 객체

Source: utils/react-nexacro/hooks.js, line 3

Returns:

전달받은 데이터셋 객체를 그대로 반환

Type:: nexacro.Dataset

Example

function MyGrid() {
    // 부모로부터 받거나 컨텍스트 등에서 구한 데이터셋 객체
    const ds = useNexacroDataset(this.ds_list);

    return React.createElement(NxGrid, { binddataset: ds.name });
}