자바스크립트 + 리액트 디자인 패턴

328

자바스크립트 + 리액트 디자인 패턴

12.11.3

Grid

컴포넌트

Grid

컴포넌트는 수직 및 수평 방향으로 가상화된 표 형태의 데이터를 렌더링합니다. 수평/

수직의 현재 스크롤 위치에 따라 필요한

Grid

셀만 렌더링합니다.

앞서 예시와 동일한 목록을 그리드 레이아웃으로 표시하고 싶다면, 입력 데이터가 다차원 배

열이라고 가정하고

FixedSizeGrid

컴포넌트를 다음과 같이 사용할 수 있습니다.

import React from "react";

import ReactDOM from "react-dom";

import { FixedSizeGrid as Grid } from "react-window";

const itemsArray = [

[{},{},{},...],

[{},{},{},...],

[{},{},{},...],

[{},{},{},...],

];

const Cell = ({ columnIndex, rowIndex, style }) => (

<div

className={

columnIndex % 2

? rowIndex % 2 === 0

? "GridItemOdd"

: "GridItemEven"

: rowIndex % 2

? "GridItemOdd"

: "GridItemEven"

}

style={style}

>

{itemsArray[rowIndex][columnIndex].name} ...