@noraent/nora-datagrid 0.0.39 → 0.0.41

package/lib/cjs/App.js

@@ -7,13 +7,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useDeferredValue, useEffect, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import { DataGrid } from "./DataGrid";
 import { useGridApiRef } from "./hooks/useGridApiRef";
 const RenderCell = (params) => {
-    const [value, setValue] = useState(0);
-    const test = useDeferredValue(value);
+    // const [value, setValue] = useState(0);
+    // const test = useDeferredValue(value);
     useEffect(() => {
         const tt = () => __awaiter(void 0, void 0, void 0, function* () {
             let tt = 0;
@@ -33,13 +33,15 @@ const RenderCell = (params) => {
                     // height: Math.floor(Math.random() * 20) + 20,
                 };
             });
-            setValue(tt);
+            // setValue(tt);
         });
         requestIdleCallback(() => {
             tt();
         });
     }, []);
-    return (_jsxs("div", { style: { background: "green" }, children: [test, params.value] }));
+    return (_jsxs("div", { style: { background: "green" }, children: [_jsx("button", { onClick: () => {
+                    params.gridRef.current.setRowHeight(1, 100);
+                }, children: "??" }), params.value] }));
 };
 const RenderEditCell = (params) => {
     return (_jsx(_Fragment, { children: _jsx("input", Object.assign({}, params, { style: { background: "yellow" } })) }));
@@ -164,7 +166,7 @@ function App() {
     const ref = useGridApiRef();
     const [dataSource, setDataSource] = useState([]);
     const handleDataSource = () => {
-        const data = Array.from({ length: 1000000 }, (_, i) => {
+        const data = Array.from({ length: 1000 }, (_, i) => {
             return {
                 id: i,
                 code: `test-${i}`,
@@ -188,7 +190,7 @@ function App() {
                 }, children: "\uB370\uC774\uD130 set" }), _jsx("button", { onClick: () => {
                     const data = ref.current.getData();
                     console.log("!!!!!", data);
-                }, children: "dd" }), _jsx("button", { children: "dd" }), _jsx("div", { style: { width: "1200px", height: "300px" }, children: _jsx(DataGrid, { gridRef: ref, columns: columns, dataSource: dataSource }) }), _jsx("div", { style: { width: "1200px", height: "300px" }, children: _jsx(DataGrid, { columns: columns, dataSource: dataSource }) }), _jsx("button", { children: "dd" })] }));
+                }, children: "\uD558" }), _jsx("div", { style: { width: "1200px", height: "300px" }, children: _jsx(DataGrid, { gridRef: ref, columns: columns, dataSource: dataSource }) }), _jsx("div", { style: { width: "1200px", height: "300px" }, children: _jsx(DataGrid, { columns: columns, dataSource: dataSource }) }), _jsx("button", { children: "dd" })] }));
 }
 export const initialItemsData = () => Array.from({ length: 10 }, (_, i) => {
     return {

package/lib/cjs/buildPackage.json

@@ -1,6 +1,6 @@
 {
   "name": "@noraent/nora-datagrid",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "module": "./lib/esm/index.js",
   "main": "./lib/cjs/index.js",
   "private": false,

package/lib/cjs/components/TwoDimensionalVirtualizedList.js

@@ -11,6 +11,7 @@ import { EditStatus } from "../types/dataGridCoreEnum";
 import CellMode from "./cell/CellMode";
 import ImeComponent from "./ime/IMEComponent";
 import NoDataComponent from "./body/NoDataComponent";
+import { useAddApi } from "../hooks/useGridInitialization";
 const initialWindowWidth = 800;
 export const initialWindowHeight = 500;
 const overscanTopRow = 4;
@@ -72,6 +73,9 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
     const { dataSource } = useSelector((store) => ({
         dataSource: store.state.dataSource,
     }));
+    const { __randomDataSourceKey } = useSelector((store) => ({
+        __randomDataSourceKey: store.__randomDataSourceKey,
+    }));
     const totalHeight = useMemo(() => dataSource.reduce((sum, item) => sum + item.height, 0), [dataSource]);
     const totalWidth = useMemo(() => columns.reduce((sum, column) => sum + Number(column.width), 0) || 0, [columns]);
     const binarySearchIndex = useCallback((items, target) => {
@@ -132,7 +136,7 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
                 result.push(dataSource[rowIndex - 1]); // fixedIndex가 범위에 포함되지 않으면 첫 번째에 추가
         }
         return result;
-    }, [dataSource, start, end]);
+    }, [__randomDataSourceKey, JSON.stringify(dataSource), start, end]);
     const startColumnIndex = useMemo(() => Math.max(0, binarySearchIndex(cumulativeWidths, scrollLeft) - overscanColumn), [columns, cumulativeWidths, scrollLeft, binarySearchIndex, overscanColumn]);
     const offsetTop = useMemo(() => cumulativeHeights[start] || 0, [cumulativeHeights, start]);
     const offsetLeft = useMemo(() => cumulativeWidths[startColumnIndex] || 0, [cumulativeWidths, startColumnIndex]);
@@ -267,6 +271,7 @@ const VirtualItem = React.memo(({ column, row, isFocus, editStatus, rowIndex, })
 export const TwoDimensionalVirtualizedList = React.memo(() => {
     // 마우스 다운 시작지점점
     const gridRef = useGridApiContext();
+    useAddApi(gridRef);
     const mouseDownStartPointRef = useRef(0);
     const mouseDownStartWidthRef = useRef(0);
     const colIndexRef = useRef(0);

package/lib/cjs/hooks/external/usePublicTest.js

@@ -2,9 +2,7 @@ import React from "react";
 import { useGridApiMethod } from "../useGridApiMethod";
 import { classes } from "../../types/classes";
 import { defaultProps } from "../../common/constants";
-import { useStore } from "../../provider/GridStoreContent";
 export default function usePublicTest(apiRef) {
-    const store = useStore();
     const getData = React.useCallback(() => {
         return apiRef.current.store.state.dataSource;
     }, []);
@@ -25,7 +23,12 @@ export default function usePublicTest(apiRef) {
     }, []);
     const setRowHeight = React.useCallback((rowIndex, height = defaultProps.height) => {
         apiRef.current.store.state.dataSource[rowIndex] = Object.assign(Object.assign({}, apiRef.current.store.state.dataSource[rowIndex]), { height: height });
-        store.setState(["state", "dataSource"], apiRef.current.store.state.dataSource);
+        apiRef.current.store.__randomDataSourceKey = `${Math.random()}`;
+        console.log("!!!", apiRef.current.store.__randomDataSourceKey);
+        apiRef.current.store.updateKeyTemp.add("__randomDataSourceKey");
+        setTimeout(() => {
+            apiRef.current.getPublicApi().forceUpdate();
+        }, 0);
     }, []);
     const apiMethods = { addCellRange, getData, scrollToRowIndex, setRowHeight };
     useGridApiMethod(apiRef, apiMethods, "public");

package/lib/cjs/hooks/internal/useInternalPrivateApi.js

@@ -31,7 +31,11 @@ export default function useInternalPrivateApi(apiRef) {
         const basicStore = setBasicStore(props);
         apiRef.current = Object.assign(Object.assign({}, apiRef.current), { store: Object.assign(Object.assign({}, apiRef.current.store), { original: basicStore, state: Object.assign({}, basicStore), 
                 // 현재 내부에서 사용되는 속성은 수동으로 초기화 해야함.
-                __cellRange: [], __cellRangeTemp: {} }) });
+                __cellRange: [], __cellRangeTemp: {}, 
+                /**
+                 * 누적 높이 캐싱
+                 */
+                cumulativeHeights: [], updateKeyTemp: new Set(), __randomDataSourceKey: "" }) });
         return apiRef.current;
     }, []);
     const setBasicStore = React.useCallback((props) => {
@@ -121,16 +125,17 @@ export default function useInternalPrivateApi(apiRef) {
             sum += (_a = row.height) !== null && _a !== void 0 ? _a : 32;
             return sum;
         });
-        apiRef.current.store.heightCache = heightCache;
+        apiRef.current.store.cumulativeHeights = heightCache;
+        return heightCache;
     }, []);
     const getScrollTop = React.useCallback((rowIndex) => {
         let low = 0;
-        let high = apiRef.current.store.heightCache.length - 1;
+        let high = apiRef.current.store.cumulativeHeights.length - 1;
         let result = 0;
         while (low <= high) {
             const mid = Math.floor((low + high) / 2);
             if (mid < rowIndex) {
-                result = apiRef.current.store.heightCache[mid];
+                result = apiRef.current.store.cumulativeHeights[mid];
                 low = mid + 1;
             }
             else {

package/lib/cjs/hooks/useGridInitialization.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
-import DataGridBasicProps, { GirdApiCommon } from "../types/dataGridProps";
-export declare function useGridInitialization(apiRef: DataGridBasicProps["gridRef"], props: DataGridBasicProps): React.MutableRefObject<GirdApiCommon<import("../types/dataGridProps").DataGridPrivateApiModel>>;
+import DataGridBasicProps, { DataGridPrivateApiModel, GirdApiCommon } from "../types/dataGridProps";
+export declare function useAddApi(ref: React.MutableRefObject<GirdApiCommon<DataGridPrivateApiModel>>): void;
+export declare function useGridInitialization(apiRef: DataGridBasicProps["gridRef"], props: DataGridBasicProps): React.MutableRefObject<GirdApiCommon<DataGridPrivateApiModel>>;

package/lib/cjs/hooks/useGridInitialization.js

@@ -2,18 +2,30 @@ import React from "react";
 import useTest from "./internal/useInternalPrivateApi";
 import usePublicTest from "./external/usePublicTest";
 import { useGridApiMethod } from "./useGridApiMethod";
+import { useStore } from "../provider/GridStoreContent";
+import useGridApiContext from "./useGridApiContext";
+export function useAddApi(ref) {
+    const store = useStore();
+    const gridRef = useGridApiContext();
+    const forceUpdate = React.useCallback(() => {
+        gridRef.current.store.updateKeyTemp.forEach((v) => {
+            //타입 및 코드 정리 필요
+            // 그리드 외부에서 접근시
+            const value = v.split(",").reduce((acc, key) => acc === null || acc === void 0 ? void 0 : acc[key], gridRef.current.store);
+            store.setState([v.split(",")], value);
+        });
+        // store.setState(gridRef.current.store.updateKeyTemp)
+    }, []);
+    useGridApiMethod(ref, { forceUpdate }, "public");
+}
 export function useGridInitialization(apiRef, props) {
     // const memoizedProps = React.useMemo(() => _.cloneDeep(props), [props]); // props를 메모이제이션
     const privateAipRef = useGridApiInitialization(apiRef, Object.assign({}, props));
     usePublicTest(privateAipRef);
     useTest(privateAipRef);
-    //test
-    const [, rawForceUpdate] = React.useState();
-    // React.useState<GirdApiCommon<DataGridPublicApi>["store"]>();
-    const forceUpdate = React.useCallback(() => rawForceUpdate(() => privateAipRef.current.store.state), 
-    // () => rawForceUpdate(() => privateAipRef.current.store),
-    [privateAipRef]);
-    useGridApiMethod(privateAipRef, { forceUpdate }, "public");
+    // const [, rawForceUpdate] = React.useState<any>();
+    // const forceUpdate = React.useCallback<DataGridPublicApi["forceUpdate"]>(() => rawForceUpdate(() => privateAipRef.current.store.state), [privateAipRef]);
+    // useGridApiMethod(privateAipRef, { forceUpdate }, "public");
     return privateAipRef;
 }
 /**

package/lib/cjs/provider/GridStoreContent.js

@@ -89,7 +89,7 @@ export const useSelector = (selector) => {
                     const newPath = [...currentPath, prop];
                     const value = obj[prop];
                     // 정확한 경로 저장
-                    if (currentPath.length > 0 || prop === "state") {
+                    if (currentPath.length > 0 || prop === "state" || prop === "original" || prop === "__randomDataSourceKey") {
                         if (!isArrayInSet(accessedPaths.current, newPath)) {
                             accessedPaths.current.add(newPath);
                         }

package/lib/cjs/types/dataGridProps.d.ts

@@ -52,11 +52,24 @@ export interface DataGridOptionPropsModel {
  * @private
  * @namespace NoraDataGrid.DataGridBasicStorePropsModel
  */
-interface DataGridBasicStorePropsModel {
+export interface DataGridBasicStorePropsModel {
     gridContainer: React.RefObject<HTMLDivElement>;
-    heightCache: number[];
+    /**
+     * 누적 높이 캐싱
+     */
+    cumulativeHeights: number[];
     __cellRange: Array<CellRangeDef>;
     __cellRangeTemp: CellRangeTempDef;
+    /**
+     * 변경된 store를 Temp로 관리 합니다.
+     * 일괄 업데이트용으로 사용해주세요.
+     */
+    updateKeyTemp: Set<string>;
+    /**
+     * dataSource 값이 변경되었을때 값이 변합니다.
+     * Object는 변경된 값을 감지하기 어렵기 때문에 별도 키 관리
+     */
+    __randomDataSourceKey: string;
 }
 /**
  * DataGrid를 구성하는 내부 메소드들을 관리 합니다.
@@ -124,7 +137,7 @@ export interface DataGridPrivateApiModel {
      */
     setEditStatus: (editStatus: DataGridStoreDef["state"]["editStatus"]) => Promise<DataGridStoreDef["state"]["editStatus"]>;
     /**
-     * 데이터에 있는 모든 행 높이를 초기화 합니다.
+     * 데이터에 있는 모든 행 높의 누적값을 생성합니다.
      * @private
      * @namespace NoraDataGrid.DataGridPublicApiModel.getData
      */
@@ -176,7 +189,7 @@ export declare class Store<T> {
     private updateNestedState;
     private isPathAffected;
 }
-export interface DataGridStoreDef extends DataGridBasicStorePropsModel {
+export interface DataGridStoreDef extends DataGridBasicStorePropsModel, DataGridBasicStorePropsModel {
     original: DataGridBasicPropsModel & DataGridOptionPropsModel;
     state: DataGridBasicPropsModel & DataGridOptionPropsModel;
 }

package/lib/cjs/types/dataGridProps.js

@@ -19,6 +19,7 @@ export class Store {
     }
     setState(path, value, isUpdate) {
         const fullPath = Array.isArray(path) ? path.map(String) : [String(path)];
+        console.log(">>>>", fullPath);
         this.state = this.updateNestedState(this.state, fullPath, value);
         this.notify(fullPath, isUpdate);
     }

package/lib/esm/App.js

@@ -7,13 +7,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useDeferredValue, useEffect, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import { DataGrid } from "./DataGrid";
 import { useGridApiRef } from "./hooks/useGridApiRef";
 const RenderCell = (params) => {
-    const [value, setValue] = useState(0);
-    const test = useDeferredValue(value);
+    // const [value, setValue] = useState(0);
+    // const test = useDeferredValue(value);
     useEffect(() => {
         const tt = () => __awaiter(void 0, void 0, void 0, function* () {
             let tt = 0;
@@ -33,13 +33,15 @@ const RenderCell = (params) => {
                     // height: Math.floor(Math.random() * 20) + 20,
                 };
             });
-            setValue(tt);
+            // setValue(tt);
         });
         requestIdleCallback(() => {
             tt();
         });
     }, []);
-    return (_jsxs("div", { style: { background: "green" }, children: [test, params.value] }));
+    return (_jsxs("div", { style: { background: "green" }, children: [_jsx("button", { onClick: () => {
+                    params.gridRef.current.setRowHeight(1, 100);
+                }, children: "??" }), params.value] }));
 };
 const RenderEditCell = (params) => {
     return (_jsx(_Fragment, { children: _jsx("input", Object.assign({}, params, { style: { background: "yellow" } })) }));
@@ -164,7 +166,7 @@ function App() {
     const ref = useGridApiRef();
     const [dataSource, setDataSource] = useState([]);
     const handleDataSource = () => {
-        const data = Array.from({ length: 1000000 }, (_, i) => {
+        const data = Array.from({ length: 1000 }, (_, i) => {
             return {
                 id: i,
                 code: `test-${i}`,
@@ -188,7 +190,7 @@ function App() {
                 }, children: "\uB370\uC774\uD130 set" }), _jsx("button", { onClick: () => {
                     const data = ref.current.getData();
                     console.log("!!!!!", data);
-                }, children: "dd" }), _jsx("button", { children: "dd" }), _jsx("div", { style: { width: "1200px", height: "300px" }, children: _jsx(DataGrid, { gridRef: ref, columns: columns, dataSource: dataSource }) }), _jsx("div", { style: { width: "1200px", height: "300px" }, children: _jsx(DataGrid, { columns: columns, dataSource: dataSource }) }), _jsx("button", { children: "dd" })] }));
+                }, children: "\uD558" }), _jsx("div", { style: { width: "1200px", height: "300px" }, children: _jsx(DataGrid, { gridRef: ref, columns: columns, dataSource: dataSource }) }), _jsx("div", { style: { width: "1200px", height: "300px" }, children: _jsx(DataGrid, { columns: columns, dataSource: dataSource }) }), _jsx("button", { children: "dd" })] }));
 }
 export const initialItemsData = () => Array.from({ length: 10 }, (_, i) => {
     return {

package/lib/esm/buildPackage.json

@@ -1,6 +1,6 @@
 {
   "name": "@noraent/nora-datagrid",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "module": "./lib/esm/index.js",
   "main": "./lib/cjs/index.js",
   "private": false,

package/lib/esm/components/TwoDimensionalVirtualizedList.js

@@ -11,6 +11,7 @@ import { EditStatus } from "../types/dataGridCoreEnum";
 import CellMode from "./cell/CellMode";
 import ImeComponent from "./ime/IMEComponent";
 import NoDataComponent from "./body/NoDataComponent";
+import { useAddApi } from "../hooks/useGridInitialization";
 const initialWindowWidth = 800;
 export const initialWindowHeight = 500;
 const overscanTopRow = 4;
@@ -72,6 +73,9 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
     const { dataSource } = useSelector((store) => ({
         dataSource: store.state.dataSource,
     }));
+    const { __randomDataSourceKey } = useSelector((store) => ({
+        __randomDataSourceKey: store.__randomDataSourceKey,
+    }));
     const totalHeight = useMemo(() => dataSource.reduce((sum, item) => sum + item.height, 0), [dataSource]);
     const totalWidth = useMemo(() => columns.reduce((sum, column) => sum + Number(column.width), 0) || 0, [columns]);
     const binarySearchIndex = useCallback((items, target) => {
@@ -132,7 +136,7 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
                 result.push(dataSource[rowIndex - 1]); // fixedIndex가 범위에 포함되지 않으면 첫 번째에 추가
         }
         return result;
-    }, [dataSource, start, end]);
+    }, [__randomDataSourceKey, JSON.stringify(dataSource), start, end]);
     const startColumnIndex = useMemo(() => Math.max(0, binarySearchIndex(cumulativeWidths, scrollLeft) - overscanColumn), [columns, cumulativeWidths, scrollLeft, binarySearchIndex, overscanColumn]);
     const offsetTop = useMemo(() => cumulativeHeights[start] || 0, [cumulativeHeights, start]);
     const offsetLeft = useMemo(() => cumulativeWidths[startColumnIndex] || 0, [cumulativeWidths, startColumnIndex]);
@@ -267,6 +271,7 @@ const VirtualItem = React.memo(({ column, row, isFocus, editStatus, rowIndex, })
 export const TwoDimensionalVirtualizedList = React.memo(() => {
     // 마우스 다운 시작지점점
     const gridRef = useGridApiContext();
+    useAddApi(gridRef);
     const mouseDownStartPointRef = useRef(0);
     const mouseDownStartWidthRef = useRef(0);
     const colIndexRef = useRef(0);

package/lib/esm/hooks/external/usePublicTest.js

@@ -2,9 +2,7 @@ import React from "react";
 import { useGridApiMethod } from "../useGridApiMethod";
 import { classes } from "../../types/classes";
 import { defaultProps } from "../../common/constants";
-import { useStore } from "../../provider/GridStoreContent";
 export default function usePublicTest(apiRef) {
-    const store = useStore();
     const getData = React.useCallback(() => {
         return apiRef.current.store.state.dataSource;
     }, []);
@@ -25,7 +23,12 @@ export default function usePublicTest(apiRef) {
     }, []);
     const setRowHeight = React.useCallback((rowIndex, height = defaultProps.height) => {
         apiRef.current.store.state.dataSource[rowIndex] = Object.assign(Object.assign({}, apiRef.current.store.state.dataSource[rowIndex]), { height: height });
-        store.setState(["state", "dataSource"], apiRef.current.store.state.dataSource);
+        apiRef.current.store.__randomDataSourceKey = `${Math.random()}`;
+        console.log("!!!", apiRef.current.store.__randomDataSourceKey);
+        apiRef.current.store.updateKeyTemp.add("__randomDataSourceKey");
+        setTimeout(() => {
+            apiRef.current.getPublicApi().forceUpdate();
+        }, 0);
     }, []);
     const apiMethods = { addCellRange, getData, scrollToRowIndex, setRowHeight };
     useGridApiMethod(apiRef, apiMethods, "public");

package/lib/esm/hooks/internal/useInternalPrivateApi.js

@@ -31,7 +31,11 @@ export default function useInternalPrivateApi(apiRef) {
         const basicStore = setBasicStore(props);
         apiRef.current = Object.assign(Object.assign({}, apiRef.current), { store: Object.assign(Object.assign({}, apiRef.current.store), { original: basicStore, state: Object.assign({}, basicStore), 
                 // 현재 내부에서 사용되는 속성은 수동으로 초기화 해야함.
-                __cellRange: [], __cellRangeTemp: {} }) });
+                __cellRange: [], __cellRangeTemp: {}, 
+                /**
+                 * 누적 높이 캐싱
+                 */
+                cumulativeHeights: [], updateKeyTemp: new Set(), __randomDataSourceKey: "" }) });
         return apiRef.current;
     }, []);
     const setBasicStore = React.useCallback((props) => {
@@ -121,16 +125,17 @@ export default function useInternalPrivateApi(apiRef) {
             sum += (_a = row.height) !== null && _a !== void 0 ? _a : 32;
             return sum;
         });
-        apiRef.current.store.heightCache = heightCache;
+        apiRef.current.store.cumulativeHeights = heightCache;
+        return heightCache;
     }, []);
     const getScrollTop = React.useCallback((rowIndex) => {
         let low = 0;
-        let high = apiRef.current.store.heightCache.length - 1;
+        let high = apiRef.current.store.cumulativeHeights.length - 1;
         let result = 0;
         while (low <= high) {
             const mid = Math.floor((low + high) / 2);
             if (mid < rowIndex) {
-                result = apiRef.current.store.heightCache[mid];
+                result = apiRef.current.store.cumulativeHeights[mid];
                 low = mid + 1;
             }
             else {

package/lib/esm/hooks/useGridInitialization.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
-import DataGridBasicProps, { GirdApiCommon } from "../types/dataGridProps";
-export declare function useGridInitialization(apiRef: DataGridBasicProps["gridRef"], props: DataGridBasicProps): React.MutableRefObject<GirdApiCommon<import("../types/dataGridProps").DataGridPrivateApiModel>>;
+import DataGridBasicProps, { DataGridPrivateApiModel, GirdApiCommon } from "../types/dataGridProps";
+export declare function useAddApi(ref: React.MutableRefObject<GirdApiCommon<DataGridPrivateApiModel>>): void;
+export declare function useGridInitialization(apiRef: DataGridBasicProps["gridRef"], props: DataGridBasicProps): React.MutableRefObject<GirdApiCommon<DataGridPrivateApiModel>>;

package/lib/esm/hooks/useGridInitialization.js

@@ -2,18 +2,30 @@ import React from "react";
 import useTest from "./internal/useInternalPrivateApi";
 import usePublicTest from "./external/usePublicTest";
 import { useGridApiMethod } from "./useGridApiMethod";
+import { useStore } from "../provider/GridStoreContent";
+import useGridApiContext from "./useGridApiContext";
+export function useAddApi(ref) {
+    const store = useStore();
+    const gridRef = useGridApiContext();
+    const forceUpdate = React.useCallback(() => {
+        gridRef.current.store.updateKeyTemp.forEach((v) => {
+            //타입 및 코드 정리 필요
+            // 그리드 외부에서 접근시
+            const value = v.split(",").reduce((acc, key) => acc === null || acc === void 0 ? void 0 : acc[key], gridRef.current.store);
+            store.setState([v.split(",")], value);
+        });
+        // store.setState(gridRef.current.store.updateKeyTemp)
+    }, []);
+    useGridApiMethod(ref, { forceUpdate }, "public");
+}
 export function useGridInitialization(apiRef, props) {
     // const memoizedProps = React.useMemo(() => _.cloneDeep(props), [props]); // props를 메모이제이션
     const privateAipRef = useGridApiInitialization(apiRef, Object.assign({}, props));
     usePublicTest(privateAipRef);
     useTest(privateAipRef);
-    //test
-    const [, rawForceUpdate] = React.useState();
-    // React.useState<GirdApiCommon<DataGridPublicApi>["store"]>();
-    const forceUpdate = React.useCallback(() => rawForceUpdate(() => privateAipRef.current.store.state), 
-    // () => rawForceUpdate(() => privateAipRef.current.store),
-    [privateAipRef]);
-    useGridApiMethod(privateAipRef, { forceUpdate }, "public");
+    // const [, rawForceUpdate] = React.useState<any>();
+    // const forceUpdate = React.useCallback<DataGridPublicApi["forceUpdate"]>(() => rawForceUpdate(() => privateAipRef.current.store.state), [privateAipRef]);
+    // useGridApiMethod(privateAipRef, { forceUpdate }, "public");
     return privateAipRef;
 }
 /**

package/lib/esm/provider/GridStoreContent.js

@@ -89,7 +89,7 @@ export const useSelector = (selector) => {
                     const newPath = [...currentPath, prop];
                     const value = obj[prop];
                     // 정확한 경로 저장
-                    if (currentPath.length > 0 || prop === "state") {
+                    if (currentPath.length > 0 || prop === "state" || prop === "original" || prop === "__randomDataSourceKey") {
                         if (!isArrayInSet(accessedPaths.current, newPath)) {
                             accessedPaths.current.add(newPath);
                         }

package/lib/esm/types/dataGridProps.d.ts

@@ -52,11 +52,24 @@ export interface DataGridOptionPropsModel {
  * @private
  * @namespace NoraDataGrid.DataGridBasicStorePropsModel
  */
-interface DataGridBasicStorePropsModel {
+export interface DataGridBasicStorePropsModel {
     gridContainer: React.RefObject<HTMLDivElement>;
-    heightCache: number[];
+    /**
+     * 누적 높이 캐싱
+     */
+    cumulativeHeights: number[];
     __cellRange: Array<CellRangeDef>;
     __cellRangeTemp: CellRangeTempDef;
+    /**
+     * 변경된 store를 Temp로 관리 합니다.
+     * 일괄 업데이트용으로 사용해주세요.
+     */
+    updateKeyTemp: Set<string>;
+    /**
+     * dataSource 값이 변경되었을때 값이 변합니다.
+     * Object는 변경된 값을 감지하기 어렵기 때문에 별도 키 관리
+     */
+    __randomDataSourceKey: string;
 }
 /**
  * DataGrid를 구성하는 내부 메소드들을 관리 합니다.
@@ -124,7 +137,7 @@ export interface DataGridPrivateApiModel {
      */
     setEditStatus: (editStatus: DataGridStoreDef["state"]["editStatus"]) => Promise<DataGridStoreDef["state"]["editStatus"]>;
     /**
-     * 데이터에 있는 모든 행 높이를 초기화 합니다.
+     * 데이터에 있는 모든 행 높의 누적값을 생성합니다.
      * @private
      * @namespace NoraDataGrid.DataGridPublicApiModel.getData
      */
@@ -176,7 +189,7 @@ export declare class Store<T> {
     private updateNestedState;
     private isPathAffected;
 }
-export interface DataGridStoreDef extends DataGridBasicStorePropsModel {
+export interface DataGridStoreDef extends DataGridBasicStorePropsModel, DataGridBasicStorePropsModel {
     original: DataGridBasicPropsModel & DataGridOptionPropsModel;
     state: DataGridBasicPropsModel & DataGridOptionPropsModel;
 }

package/lib/esm/types/dataGridProps.js

@@ -19,6 +19,7 @@ export class Store {
     }
     setState(path, value, isUpdate) {
         const fullPath = Array.isArray(path) ? path.map(String) : [String(path)];
+        console.log(">>>>", fullPath);
         this.state = this.updateNestedState(this.state, fullPath, value);
         this.notify(fullPath, isUpdate);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noraent/nora-datagrid",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "module": "./lib/esm/index.js",
   "main": "./lib/cjs/index.js",
   "private": false,