devextream in DataGrid 사용하기

---

DataGrid 주요 속성들

dataSource

import React from 'react';
import 'devextreme/dist/css/dx.light.css';
 
import CustomStore from 'devextreme/data/custom_store';
import { createStore } from 'devextreme-aspnet-data-nojquery';
import DataGrid from 'devextreme-react/data-grid';
 
const serviceUrl = "https://url/to/my/service";
const store = createStore({
    key: "ID",
    loadUrl: serviceUrl + "/GetAction",
    insertUrl: serviceUrl + "/InsertAction",
    updateUrl: serviceUrl + "/UpdateAction",
    deleteUrl: serviceUrl + "/DeleteAction"
});
 
class App extends React.Component {
    render() {
        return (
            <DataGrid ...
                dataSource={store} />
        );
    }
}
export default App;

Type : Store, DataSource, DataSource Configuration, String, Array

Store 타입이란?

1. devextream에서 제공해주는 유니버셜한 data access component이다.

• load(options) : 말 그대로 data를 로드한다. sorting, grouping, filtering과 같은 함수를 제공해주며 로드한 데이터를 변경할 수 있는 요소를 제공한다.
• insert(values) : 값을 INSERT하여 새로운 아이템을 넣는다.
• remove(key) : key값을 통해서 데이터를 삭제한다.
• update(key, values) : key값을 통해서 데이터를 update한다.
• byKey(key, extraOptions) : key값을 통해서 데이터를 로드한다. extraOptions을 통해서 강제성을 가진 데이터를 필수로 불러온다.
• totalCount(options) : 로드한 데이터의 총 값을 가져온다. options를 통해서 오브젝트 데이터를 필터링하거나 그룹핑하는 데에 사용한다.

코드 예시

  const dataSource = useMemo(() => {
    const apiUrl = URL;

    return new CustomStore({
      key: "code", // 키값
      load: () => sendRequest(apiUrl, "GET"),
      insert: (values) => sendRequest(apiUrl, "POST", values),
      update: (key, values) => sendRequest(apiUrl, "PUT", { key, values }),
      remove: (key) => sendRequest(apiUrl, "DELETE", { key }),
    });
  }, []);

1. key를 정하는 것은 불러오는 테이블의 컬럼 중 FK가 해당되는 컬럼을 넣어준다.
2. 이렇게 정해주지 않으면 E1042 오류가 생길 수 있으니 Store 컴포넌트를 통해서 정해주는 게 좋다.

focusedRowEnabled

Type : boolean

1. row를 선택할 때 포커스를 맞춰주게 하는 속성이다.
2. 디폴트값이 false이기 때문에 true로 맞춰주면 활성화 된다.

onFocusedRowChanged

Type : function

1. focusedRowEnabled를 true로 해줘야만 활성화가 가능한 속성이다.
2. 포커스가 맞춰진 후 실행하는 함수이며 row data를 event로 리턴한다.

코드 예시

const onFocusedRowChanged = (e) => {
    console.log("rows", e.row); // event로 받은 row data
    reset({ // react hook form을 통해 reset
      loss_no: e.row.data.Loss_No,
      loss_code: e.row.data.Loss_Code,
      order_no: e.row.data.Order_No,
      cost: e.row.data.Cost,
      reason: e.row.data.Reason,
      remark: e.row.data.Remark,
    });
  };

<InputText
control={control}
errors={errors}
name="loss_no"
label="일련번호"
></InputText>

1. 이를 통해서 React hook form과 사용해 name값을 찾아 DataGrid의 row data를 value에 넣어줄 수 있다.

onContentReady

Type : function

1. 말 그대로 컴포넌트의 데이터가 변경될 때마다 실행되는 함수이다.

const [totalCount, setTotalCount] = useState(0); // State 선언
onContentReady={(e) => setTotalCount(e.component.totalCount())}

2. 이러한 식으로 event 객체를 가져와서 totalCount 값을 구할 수도 있다.

keyExpr

Type : String, Array

1. 테이블 데이터를 불러오기 위한 키값을 정하는 것이다.
2. 말 그대로 FK를 지정하여 데이터를 불러오는 데에 필요한 값이다.

---

결론

다음에는 devextream에서 제공하는 Store type과 UI Logic에 대해서 더 자세히 살펴봐야겠다.

출처

Devextream DataGrid Doc