@noraent/nora-datagrid 0.0.43 → 0.0.45

package/lib/cjs/buildPackage.json

@@ -1,6 +1,6 @@
 {
   "name": "@noraent/nora-datagrid",
-  "version": "0.0.43",
+  "version": "0.0.45",
   "module": "./lib/esm/index.js",
   "main": "./lib/cjs/index.js",
   "private": false,
@@ -28,6 +28,7 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@noraent/nora-datagrid": "file:",
+    "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rimraf": "^6.0.1",

package/lib/cjs/common/constants/utils.d.ts

@@ -6,4 +6,19 @@ import React from "react";
  * @param deps
  */
 declare function useUpdateEffect(callback: React.EffectCallback, deps: React.DependencyList): void;
+/**
+ * Array<Object> 경우 변경 감지하기 힘들기 때문에 별도 hook 구성함
+ * 깊은 비교를 통해 종속성 배열의 변경을 감지하는 커스텀 훅
+ * @param callback 실행할 효과 함수
+ * @param dependencies 종속성 배열
+ */
+export declare function useDeepCompareEffect<T>(callback: () => void | (() => void), dependencies: T[]): void;
+/**
+ * Array<Object> 경우 변경 감지하기 힘들기 때문에 별도 hook 구성함
+ * 깊은 비교와 팩토리 함수를 사용하는 메모이제이션 훅
+ * @param factory 계산을 수행하는 팩토리 함수
+ * @param deps 의존성 배열
+ * @returns 메모이제이션된 계산 결과
+ */
+export declare function useDeepCompareMemo<T>(factory: () => T, deps: any[]): T;
 export default useUpdateEffect;

package/lib/cjs/common/constants/utils.js

@@ -1,4 +1,5 @@
 import React from "react";
+import _ from "lodash";
 /**
  * 첫 마운트시 실행 되지 않습니다.
  * 업데이트시 실행하고 싶다면 사용해주세요.
@@ -17,4 +18,43 @@ function useUpdateEffect(callback, deps) {
         }
     }, deps);
 }
+/**
+ * Array<Object> 경우 변경 감지하기 힘들기 때문에 별도 hook 구성함
+ * 깊은 비교를 통해 종속성 배열의 변경을 감지하는 커스텀 훅
+ * @param callback 실행할 효과 함수
+ * @param dependencies 종속성 배열
+ */
+export function useDeepCompareEffect(callback, dependencies) {
+    const previousDependenciesRef = React.useRef();
+    React.useEffect(() => {
+        const isSame = _.isEqual(previousDependenciesRef.current, dependencies);
+        if (!isSame) {
+            previousDependenciesRef.current = _.cloneDeep(dependencies);
+            return callback();
+        }
+    }, [callback, JSON.stringify(dependencies)]);
+}
+/**
+ * Array<Object> 경우 변경 감지하기 힘들기 때문에 별도 hook 구성함
+ * 깊은 비교와 팩토리 함수를 사용하는 메모이제이션 훅
+ * @param factory 계산을 수행하는 팩토리 함수
+ * @param deps 의존성 배열
+ * @returns 메모이제이션된 계산 결과
+ */
+export function useDeepCompareMemo(factory, deps) {
+    // 의존성 배열을 위한 ref
+    const depsRef = React.useRef();
+    // 현재 값을 저장하기 위한 ref
+    const valueRef = React.useRef();
+    // 의존성의 깊은 비교 수행
+    const depsChanged = !_.isEqual(depsRef.current, deps);
+    // 의존성이 변경되었을 때만 값 재계산
+    if (depsChanged || valueRef.current === undefined) {
+        valueRef.current = factory();
+        depsRef.current = _.cloneDeep(deps);
+    }
+    // deps 배열의 얕은 비교를 위한 문자열화
+    // 이는 React의 렌더링 시스템과 함께 작동하기 위함
+    return React.useMemo(() => valueRef.current, [JSON.stringify(deps)]);
+}
 export default useUpdateEffect;

package/lib/cjs/components/TwoDimensionalVirtualizedList.js

@@ -12,6 +12,7 @@ import CellMode from "./cell/CellMode";
 import ImeComponent from "./ime/IMEComponent";
 import NoDataComponent from "./body/NoDataComponent";
 import { useAddApi } from "../hooks/useGridInitialization";
+import { useDeepCompareMemo } from "../common/constants/utils";
 const initialWindowWidth = 800;
 export const initialWindowHeight = 500;
 const overscanTopRow = 4;
@@ -76,8 +77,19 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
     const { __randomDataSourceKey } = useSelector((store) => ({
         __randomDataSourceKey: store.__randomDataSourceKey,
     }));
-    const totalHeight = useMemo(() => dataSource.reduce((sum, item) => sum + item.height, 0), [dataSource, __randomDataSourceKey]);
-    const totalWidth = useMemo(() => columns.reduce((sum, column) => sum + Number(column.width), 0) || 0, [columns]);
+    // useDeepCompareEffect(() => {
+    //   console.log("변경됨", dataSource);
+    // }, [dataSource]);
+    // const totalHeight = useMemo(
+    //   () => dataSource.reduce((sum, item) => sum + item.height!, 0),
+    //   [
+    //     // dataSource,
+    //     __randomDataSourceKey,
+    //   ]
+    // );
+    const totalHeight = useDeepCompareMemo(() => dataSource.reduce((sum, item) => sum + item.height, 0), [dataSource]);
+    const totalWidth = useDeepCompareMemo(() => columns.reduce((sum, column) => sum + Number(column.width), 0) || 0, [columns]);
+    // const totalWidth = useMemo(() => columns.reduce((sum, column) => sum + Number(column.width), 0) || 0, [columns]);
     const binarySearchIndex = useCallback((items, target) => {
         let low = 0;
         let high = items.length - 1;
@@ -95,14 +107,31 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         }
         return Math.max(0, low - 1);
     }, []);
-    const cumulativeHeights = useMemo(() => {
+    // const cumulativeHeights = useMemo(() => {
+    //   const heights = [0];
+    //   for (let i = 0; i < dataSource.length; i++) {
+    //     heights.push(heights[i] + dataSource[i].height!);
+    //   }
+    //   return heights;
+    // }, [
+    //   // dataSource,
+    //   __randomDataSourceKey,
+    // ]);
+    const cumulativeHeights = useDeepCompareMemo(() => {
         const heights = [0];
         for (let i = 0; i < dataSource.length; i++) {
             heights.push(heights[i] + dataSource[i].height);
         }
         return heights;
-    }, [dataSource, __randomDataSourceKey]);
-    const cumulativeWidths = useMemo(() => {
+    }, [dataSource]);
+    // const cumulativeWidths = useMemo(() => {
+    //   const widths = [0];
+    //   for (let i = 0; i < columns.length || 0; i++) {
+    //     widths.push(widths[i] + Number(columns[i].width));
+    //   }
+    //   return widths;
+    // }, [columns]);
+    const cumulativeWidths = useDeepCompareMemo(() => {
         const widths = [0];
         for (let i = 0; i < columns.length || 0; i++) {
             widths.push(widths[i] + Number(columns[i].width));
@@ -118,9 +147,16 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         }
         end = Math.min(end + overscanBottomRow, dataSource.length);
         return { start, end };
-    }, [dataSource, scrollTop, cumulativeHeights, windowSize.height, binarySearchIndex, __randomDataSourceKey]);
+    }, [
+        JSON.stringify(dataSource),
+        scrollTop,
+        cumulativeHeights,
+        windowSize.height,
+        binarySearchIndex,
+        // __randomDataSourceKey,
+    ]);
     const { start, end } = getItemRange();
-    const visibleItems = useMemo(() => {
+    const visibleItems = useDeepCompareMemo(() => {
         const result = [];
         const rowIndex = gridRef.current.getCellFocus()[0];
         // 포함 안되어있으면 추가
@@ -136,10 +172,15 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
                 result.push(dataSource[rowIndex - 1]); // fixedIndex가 범위에 포함되지 않으면 첫 번째에 추가
         }
         return result;
-    }, [__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]);
+    }, [
+        // __randomDataSourceKey,
+        dataSource,
+        start,
+        end,
+    ]);
+    const startColumnIndex = useDeepCompareMemo(() => Math.max(0, binarySearchIndex(cumulativeWidths, scrollLeft) - overscanColumn), [cumulativeWidths, scrollLeft, binarySearchIndex, overscanColumn]);
+    const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start] || 0, [cumulativeHeights, start]);
+    const offsetLeft = useDeepCompareMemo(() => cumulativeWidths[startColumnIndex] || 0, [cumulativeWidths, startColumnIndex]);
     const domRef = React.useRef(null);
     const updateScroll = useCallback((newScrollTop, newScrollLeft) => {
         newScrollTop !== undefined && setScrollTop(newScrollTop);
@@ -181,7 +222,7 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         }
         return items.length - 1;
     }, [windowSize.width]);
-    const columnEndIndex = useMemo(() => binarySearchColumnIndex(cumulativeWidths, startColumnIndex, scrollLeft), [cumulativeWidths, startColumnIndex, scrollLeft, windowSize.width]);
+    const columnEndIndex = useDeepCompareMemo(() => binarySearchColumnIndex(cumulativeWidths, startColumnIndex, scrollLeft), [cumulativeWidths, startColumnIndex, scrollLeft, windowSize.width]);
     const isSyncingRef = useRef(false);
     const handleScrollController = useCallback((e) => {
         if (isSyncingRef.current)
@@ -251,7 +292,7 @@ const VirtualListItem = React.memo(({ item, startColumnIndex, cumulativeWidths,
         return { start, end };
     }, [startColumnIndex, cumulativeWidths, windowSize, columnEndIndex]);
     const { start, end } = getItemRange();
-    const visibleColumns = useMemo(() => columns.slice(start, end + 1), [start, end, columns]);
+    const visibleColumns = useDeepCompareMemo(() => columns.slice(start, end + 1), [start, end, columns]);
     const cellStyle = useMemo(() => ({ height: `${item.height}px` }), [item.height]);
     return (_jsx(TableRow, { "aria-rowindex": item.__ariaRowindex, style: cellStyle, className: classes.TableClasses.body.row.root, children: visibleColumns.map((column) => (_jsx(VirtualItem, { column: column, row: row, rowIndex: item.__dataRowindex, isFocus: isColIndex === column.__ariaColindex, editStatus: isColIndex === column.__ariaColindex ? editStatus : undefined }, column.__uuid))) }, item.id));
 });

package/lib/cjs/components/virtualized/_styled/index.js

@@ -14,7 +14,7 @@ export const TableBody = styled("div")(({ lineHeight = defaultProps.height }) =>
     },
 }));
 export const TableCell = styled("div")(() => ({
-    padding: "0px 10px",
+    padding: "1px 10px",
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",

package/lib/esm/buildPackage.json

@@ -1,6 +1,6 @@
 {
   "name": "@noraent/nora-datagrid",
-  "version": "0.0.43",
+  "version": "0.0.45",
   "module": "./lib/esm/index.js",
   "main": "./lib/cjs/index.js",
   "private": false,
@@ -28,6 +28,7 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@noraent/nora-datagrid": "file:",
+    "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rimraf": "^6.0.1",

package/lib/esm/common/constants/utils.d.ts

@@ -6,4 +6,19 @@ import React from "react";
  * @param deps
  */
 declare function useUpdateEffect(callback: React.EffectCallback, deps: React.DependencyList): void;
+/**
+ * Array<Object> 경우 변경 감지하기 힘들기 때문에 별도 hook 구성함
+ * 깊은 비교를 통해 종속성 배열의 변경을 감지하는 커스텀 훅
+ * @param callback 실행할 효과 함수
+ * @param dependencies 종속성 배열
+ */
+export declare function useDeepCompareEffect<T>(callback: () => void | (() => void), dependencies: T[]): void;
+/**
+ * Array<Object> 경우 변경 감지하기 힘들기 때문에 별도 hook 구성함
+ * 깊은 비교와 팩토리 함수를 사용하는 메모이제이션 훅
+ * @param factory 계산을 수행하는 팩토리 함수
+ * @param deps 의존성 배열
+ * @returns 메모이제이션된 계산 결과
+ */
+export declare function useDeepCompareMemo<T>(factory: () => T, deps: any[]): T;
 export default useUpdateEffect;

package/lib/esm/common/constants/utils.js

@@ -1,4 +1,5 @@
 import React from "react";
+import _ from "lodash";
 /**
  * 첫 마운트시 실행 되지 않습니다.
  * 업데이트시 실행하고 싶다면 사용해주세요.
@@ -17,4 +18,43 @@ function useUpdateEffect(callback, deps) {
         }
     }, deps);
 }
+/**
+ * Array<Object> 경우 변경 감지하기 힘들기 때문에 별도 hook 구성함
+ * 깊은 비교를 통해 종속성 배열의 변경을 감지하는 커스텀 훅
+ * @param callback 실행할 효과 함수
+ * @param dependencies 종속성 배열
+ */
+export function useDeepCompareEffect(callback, dependencies) {
+    const previousDependenciesRef = React.useRef();
+    React.useEffect(() => {
+        const isSame = _.isEqual(previousDependenciesRef.current, dependencies);
+        if (!isSame) {
+            previousDependenciesRef.current = _.cloneDeep(dependencies);
+            return callback();
+        }
+    }, [callback, JSON.stringify(dependencies)]);
+}
+/**
+ * Array<Object> 경우 변경 감지하기 힘들기 때문에 별도 hook 구성함
+ * 깊은 비교와 팩토리 함수를 사용하는 메모이제이션 훅
+ * @param factory 계산을 수행하는 팩토리 함수
+ * @param deps 의존성 배열
+ * @returns 메모이제이션된 계산 결과
+ */
+export function useDeepCompareMemo(factory, deps) {
+    // 의존성 배열을 위한 ref
+    const depsRef = React.useRef();
+    // 현재 값을 저장하기 위한 ref
+    const valueRef = React.useRef();
+    // 의존성의 깊은 비교 수행
+    const depsChanged = !_.isEqual(depsRef.current, deps);
+    // 의존성이 변경되었을 때만 값 재계산
+    if (depsChanged || valueRef.current === undefined) {
+        valueRef.current = factory();
+        depsRef.current = _.cloneDeep(deps);
+    }
+    // deps 배열의 얕은 비교를 위한 문자열화
+    // 이는 React의 렌더링 시스템과 함께 작동하기 위함
+    return React.useMemo(() => valueRef.current, [JSON.stringify(deps)]);
+}
 export default useUpdateEffect;

package/lib/esm/components/TwoDimensionalVirtualizedList.js

@@ -12,6 +12,7 @@ import CellMode from "./cell/CellMode";
 import ImeComponent from "./ime/IMEComponent";
 import NoDataComponent from "./body/NoDataComponent";
 import { useAddApi } from "../hooks/useGridInitialization";
+import { useDeepCompareMemo } from "../common/constants/utils";
 const initialWindowWidth = 800;
 export const initialWindowHeight = 500;
 const overscanTopRow = 4;
@@ -76,8 +77,19 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
     const { __randomDataSourceKey } = useSelector((store) => ({
         __randomDataSourceKey: store.__randomDataSourceKey,
     }));
-    const totalHeight = useMemo(() => dataSource.reduce((sum, item) => sum + item.height, 0), [dataSource, __randomDataSourceKey]);
-    const totalWidth = useMemo(() => columns.reduce((sum, column) => sum + Number(column.width), 0) || 0, [columns]);
+    // useDeepCompareEffect(() => {
+    //   console.log("변경됨", dataSource);
+    // }, [dataSource]);
+    // const totalHeight = useMemo(
+    //   () => dataSource.reduce((sum, item) => sum + item.height!, 0),
+    //   [
+    //     // dataSource,
+    //     __randomDataSourceKey,
+    //   ]
+    // );
+    const totalHeight = useDeepCompareMemo(() => dataSource.reduce((sum, item) => sum + item.height, 0), [dataSource]);
+    const totalWidth = useDeepCompareMemo(() => columns.reduce((sum, column) => sum + Number(column.width), 0) || 0, [columns]);
+    // const totalWidth = useMemo(() => columns.reduce((sum, column) => sum + Number(column.width), 0) || 0, [columns]);
     const binarySearchIndex = useCallback((items, target) => {
         let low = 0;
         let high = items.length - 1;
@@ -95,14 +107,31 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         }
         return Math.max(0, low - 1);
     }, []);
-    const cumulativeHeights = useMemo(() => {
+    // const cumulativeHeights = useMemo(() => {
+    //   const heights = [0];
+    //   for (let i = 0; i < dataSource.length; i++) {
+    //     heights.push(heights[i] + dataSource[i].height!);
+    //   }
+    //   return heights;
+    // }, [
+    //   // dataSource,
+    //   __randomDataSourceKey,
+    // ]);
+    const cumulativeHeights = useDeepCompareMemo(() => {
         const heights = [0];
         for (let i = 0; i < dataSource.length; i++) {
             heights.push(heights[i] + dataSource[i].height);
         }
         return heights;
-    }, [dataSource, __randomDataSourceKey]);
-    const cumulativeWidths = useMemo(() => {
+    }, [dataSource]);
+    // const cumulativeWidths = useMemo(() => {
+    //   const widths = [0];
+    //   for (let i = 0; i < columns.length || 0; i++) {
+    //     widths.push(widths[i] + Number(columns[i].width));
+    //   }
+    //   return widths;
+    // }, [columns]);
+    const cumulativeWidths = useDeepCompareMemo(() => {
         const widths = [0];
         for (let i = 0; i < columns.length || 0; i++) {
             widths.push(widths[i] + Number(columns[i].width));
@@ -118,9 +147,16 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         }
         end = Math.min(end + overscanBottomRow, dataSource.length);
         return { start, end };
-    }, [dataSource, scrollTop, cumulativeHeights, windowSize.height, binarySearchIndex, __randomDataSourceKey]);
+    }, [
+        JSON.stringify(dataSource),
+        scrollTop,
+        cumulativeHeights,
+        windowSize.height,
+        binarySearchIndex,
+        // __randomDataSourceKey,
+    ]);
     const { start, end } = getItemRange();
-    const visibleItems = useMemo(() => {
+    const visibleItems = useDeepCompareMemo(() => {
         const result = [];
         const rowIndex = gridRef.current.getCellFocus()[0];
         // 포함 안되어있으면 추가
@@ -136,10 +172,15 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
                 result.push(dataSource[rowIndex - 1]); // fixedIndex가 범위에 포함되지 않으면 첫 번째에 추가
         }
         return result;
-    }, [__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]);
+    }, [
+        // __randomDataSourceKey,
+        dataSource,
+        start,
+        end,
+    ]);
+    const startColumnIndex = useDeepCompareMemo(() => Math.max(0, binarySearchIndex(cumulativeWidths, scrollLeft) - overscanColumn), [cumulativeWidths, scrollLeft, binarySearchIndex, overscanColumn]);
+    const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start] || 0, [cumulativeHeights, start]);
+    const offsetLeft = useDeepCompareMemo(() => cumulativeWidths[startColumnIndex] || 0, [cumulativeWidths, startColumnIndex]);
     const domRef = React.useRef(null);
     const updateScroll = useCallback((newScrollTop, newScrollLeft) => {
         newScrollTop !== undefined && setScrollTop(newScrollTop);
@@ -181,7 +222,7 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         }
         return items.length - 1;
     }, [windowSize.width]);
-    const columnEndIndex = useMemo(() => binarySearchColumnIndex(cumulativeWidths, startColumnIndex, scrollLeft), [cumulativeWidths, startColumnIndex, scrollLeft, windowSize.width]);
+    const columnEndIndex = useDeepCompareMemo(() => binarySearchColumnIndex(cumulativeWidths, startColumnIndex, scrollLeft), [cumulativeWidths, startColumnIndex, scrollLeft, windowSize.width]);
     const isSyncingRef = useRef(false);
     const handleScrollController = useCallback((e) => {
         if (isSyncingRef.current)
@@ -251,7 +292,7 @@ const VirtualListItem = React.memo(({ item, startColumnIndex, cumulativeWidths,
         return { start, end };
     }, [startColumnIndex, cumulativeWidths, windowSize, columnEndIndex]);
     const { start, end } = getItemRange();
-    const visibleColumns = useMemo(() => columns.slice(start, end + 1), [start, end, columns]);
+    const visibleColumns = useDeepCompareMemo(() => columns.slice(start, end + 1), [start, end, columns]);
     const cellStyle = useMemo(() => ({ height: `${item.height}px` }), [item.height]);
     return (_jsx(TableRow, { "aria-rowindex": item.__ariaRowindex, style: cellStyle, className: classes.TableClasses.body.row.root, children: visibleColumns.map((column) => (_jsx(VirtualItem, { column: column, row: row, rowIndex: item.__dataRowindex, isFocus: isColIndex === column.__ariaColindex, editStatus: isColIndex === column.__ariaColindex ? editStatus : undefined }, column.__uuid))) }, item.id));
 });

package/lib/esm/components/virtualized/_styled/index.js

@@ -14,7 +14,7 @@ export const TableBody = styled("div")(({ lineHeight = defaultProps.height }) =>
     },
 }));
 export const TableCell = styled("div")(() => ({
-    padding: "0px 10px",
+    padding: "1px 10px",
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noraent/nora-datagrid",
-  "version": "0.0.43",
+  "version": "0.0.45",
   "module": "./lib/esm/index.js",
   "main": "./lib/cjs/index.js",
   "private": false,
@@ -28,6 +28,7 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@noraent/nora-datagrid": "file:",
+    "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rimraf": "^6.0.1",