DevExtreme 중 CustomStore에 대해 알기

---

• 출처 - DevExtreme : CustomStore

CustomStore란 무엇인가?

ASP.NET과 PHP의 확장성을 가지고 있는 server-side data processing 라이브러리이다.

MongoDB와도 확장이 가능하다.

1. client-side data processing
   1. lode 기능을 구현하여서 datasource를 통해 데이터를 가져올 수 있다.
2. server-side data processing
   1. 이 또한 lode 기능을 구현하여서 데이터 처리 매개변수를 서버로 보낸 후 서버 측에서 응답을 하는 형식으로 데이터를 불러온다.

Example

// ...
import CustomStore from 'devextreme/data/custom_store';
import DataSource from 'devextreme/data/data_source';
 
const store = new CustomStore({
    key: 'id',
    load: (loadOptions) => { // SELECT
        // ...
    },
    insert: (values) => { // INSERT
        // ...
    },
    update: (key, values) => { // UPDATE
        // ...
    },
    remove: (key) => { // DELETE
        // ...
    }
});
 
// ===== or inside the DataSource =====
const dataSource = new DataSource({
    // ...
    // a mix of CustomStore and DataSource properties
    // ...
});
 
class App extends React.Component {
    // ...
}
export default App;

예제

  const dataSource = useMemo(() => {
    if (rowData) {
      dataGridDetailRef.current &&
        dataGridDetailRef.current.instance.cancelEditData();
      reset({
        field: rowData.data.field,
        field: rowData.data.field,
        field: rowData.data.field,
      });
      const getApiUrl = `${process.env.REACT_APP_API_URL}/blabla/blabla/${rowData.key}`;
      const apiUrl = `${process.env.REACT_APP_API_URL}/blabla/blabla`;

      return new CustomStore({
        key: "id",
        load: () => sendRequest(getApiUrl, "GET"),
        insert: (values) =>
          sendRequest(apiUrl, "POST", {
            ...values,
            field: watch("field"),
          }),
        update: (id, values) =>
          sendRequest(apiUrl, "PUT", {
            id,
            values,
            field: watch("field"),
          }),
        remove: (id) =>
          sendRequest(apiUrl, "DELETE", { id, field: watch("field") }),
      });
    } else {
      reset({
        field: "",
        field: "",
        field: "",
      });

 return new CustomStore({
        key: "id",

1. 이처럼 key 매개변수를 주어야 하는 이유는 데이터에 대한 유니크 key가 필요하기 때문이다.
2. DB에서 데이터를 불러온다면 key는 PK로 지정해주면 된다.
3. 이렇게 server-side, client-side를 통해서 CRUD가 가능하다.
4. sendRequest는 직접 만든 모듈이다.
5. 서버 측에게 데이터를 전달하기 위해서 axios 라이브러리를 통해서 CRUD를 진행한다.

Configuration

• 문서 : Configuration