[react-grid-layout] 그려진 아이템의 width/height 변경하기

어느날 화면 최소화/최대화 기능을 만들어야겠다 생각이 들었다.

화면 구성용으로 react-grid-layout 라이브러리를 쓰고있고

개중에 사이즈에 따라 가변적으로 변하는 ResponsiveGridLayout을 쓰고 있다.

 

나는 ResponsiveGridLayout의 children으로 들어가는 데이터가 state값이고 이 값의 w(너비), h(높이) 값을 변경해주면 리렌더링 될거라고 생각했는데 테스트해보니 동작 안함

  export type ViewConfig = {
  i: string;
  content: any;
  x: number;
  y: number;
  w: number;
  h: number;
  static?: boolean;
};

  return (
    <ResponsiveReactGridLayout
      className="layout gridLayout"
      onLayoutChange={onLayoutChange}
      onBreakpointChange={onBreakpointChange}
      breakpoints={breakpoint}
      cols={cols}
      rowHeight={rowHeight}
      isDraggable={gridDraggable}
    >
      {items.map((el) => (
        <div key={el.i} data-grid={el}>
          {el.content}
        </div>
      ))}
    </ResponsiveReactGridLayout>
  );

 

지금 링크를 잃어버렸는데 react-grid-layout에서 성능 문제로 이부분 변경 감지를 안한다고 한다.

대신에 layout 값을 넣어주고 그 값을 변경해주라고 하는데 시간날때 한번 적용해봐야겠다.

 

아래는 Layout 인터페이스 구조

interface Layout {
        /**
         * A string corresponding to the component key.
         * Uses the index of components instead if not provided.
         */
        i: string;

        /**
         * X position in grid units.
         */
        x: number;

        /**
         * Y position in grid units.
         */
        y: number;

        /**
         * Width in grid units.
         */
        w: number;

        /**
         * Height in grid units.
         */
        h: number;

        /**
         * Minimum width in grid units.
         */
        minW?: number | undefined;

        /**
         * Maximum width in grid units.
         */
        maxW?: number | undefined;

        /**
         * Minimum height in grid units.
         */
        minH?: number | undefined;

        /**
         * Maximum height in grid units.
         */
        maxH?: number | undefined;

        /**
         * set by DragEvents (onDragStart, onDrag, onDragStop) and ResizeEvents (onResizeStart, onResize, onResizeStop)
         */
        moved?: boolean | undefined;

        /**
         * If true, equal to `isDraggable: false` and `isResizable: false`.
         */
        static?: boolean | undefined;

        /**
         * If false, will not be draggable. Overrides `static`.
         */
        isDraggable?: boolean | undefined;

        /**
         * If false, will not be resizable. Overrides `static`.
         */
        isResizable?: boolean | undefined;

        /**
         * By default, a handle is only shown on the bottom-right (southeast) corner.
         * Note that resizing from the top or left is generally not intuitive.
         */
        resizeHandles?: ResizeHandle[] | undefined;

        /**
         * If true and draggable, item will be moved only within grid.
         */
        isBounded?: boolean | undefined;
    }

 

https://stackoverflow.com/questions/38207790/react-grid-layout-how-to-re-render-items-on-resize

React-Grid-Layout: How to re-render items on resize

https://stackoverflow.com/questions/35689302/programmatically-change-height-width-of-items-in-react-grid-layout

Programmatically change height/width of items in react-grid-layout