[.net] React 페이지 만들기 3

Grid 만들기

• src/Components에 RankingGrid.js 생성

const RankingGrid = ({items, imgArr})=>{
    const rankingGrid = [];
    const cellCollectionTop = [];
    const cellCollectionMiddle = [];
    const cellCollectionBottom = [];
    const cellCollectionWorst = [];

    const pushCellMarkupToArr = (cellCollection, rankNum, rowLabel)=>{
        if(rankNum > 0){
            var item = items.find(o=>o.ranking === rankNum);
            cellCollection.push(<div id={`rank-${rankNum}`} className="rank-cell"></div>)
        }
        else{
            cellCollection.push(<div id={`rank-${rankNum}`} className='row-label'>
                <h4>{rowLabel}</h4>
            </div>)
        }
    }

    const createCellsForRow = (rowNum)=>{
        var rankNum = 0;
        var currCollection = [];
        var label = "";
        const numCells = 5;

        for(var a = 1;a<=numCells; a++){
            rankNum = (a===1)?0:(numCells * (rowNum - 1)) + a - rowNum;
            if(rowNum === 1){
                currCollection = cellCollectionTop;
                label = "Top Tier";
            }
            else if(rowNum === 2){
                currCollection = cellCollectionMiddle;
                label = "Middle Tier";
            }
            else if(rowNum === 3){
                currCollection = cellCollectionBottom;
                label = "Bottom Tier";
            }
            else if(rowNum === 4){
                currCollection = cellCollectionWorst;
                label = "Worst Tier";
            }
            pushCellMarkupToArr(currCollection, rankNum, label);
        }
    }

    const createCellsForRows = ()=>{
        const maxRows = 4;
        for(var row = 1; row<=maxRows;row++){
            createCellsForRow(row);
        }
    }

    const createRowsForGrid = ()=>{
        rankingGrid.push(<div className="rank-row top-tier">{cellCollectionTop}</div>)
        rankingGrid.push(<div className="rank-row middle-tier">{cellCollectionMiddle}</div>)
        rankingGrid.push(<div className="rank-row bottom-tier">{cellCollectionBottom}</div>)
        rankingGrid.push(<div className="rank-row worst-tier">{cellCollectionWorst}</div>)
    
        return rankingGrid;
    }
    const createRankingGrid = ()=>{
        createCellsForRows();
        return createRowsForGrid();
    }

    return (
        <div className = "rankings">
            {createRankingGrid()}
        </div>
    )
    
}
export default RankingGrid;

• Gird의 Row는 4개로 고정되어 있음
• for문을 통해 cell을 생성

RankingItem 컴포넌트 수정

import React, {useState, useEffect} from "react";
import MovieImageArr from "./MovieImages";
import RankingGrid from "./RankingGrid";

const RankItems = ()=>{
    const [items, setItems] = useState([]);
    const dataType = 1;

    useEffect(()=>{
        fetch(`item/${dataType}`)
        .then((results)=>{
            return results.json();
        })
        .then(data=>{
            setItems(data);
        })
    },[])
    
    return (
        <main>
            <RankingGrid items={items} imgArr={MovieImageArr}/>
            <div className="items-not-ranked">
            {
                (items.length > 0) ? items.map((item)=>
                <div className="unranked-cell">
                    <img id={`item-${item.id}`} src={MovieImageArr.find(o=>o.id===item.imageId)?.image}/>
                </div>
                ):<div>Loading...</div>
            }
            </div>
        </main>
    )
}
export default RankItems;

• main 컴포넌트 하위에 Grid와 이미지들을 생성할 수 있도록 구조 변경

CSS 꾸미기

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

code {
  color: #E01A76;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}
main{
  display: flex;
  align-items: center;
  flex-direction: column;
}

.items-not-ranked{
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 15px;
}
.unranked-cell{
  width: 80px;
  text-align: center;
  margin-left: 3px;
}
.unranked-cell img{
  width: 100%;
  height: 100%;
}
.rankings{
  width: 800px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  justify-self: center;
  margin-bottom: 15px;
}
.rank-row{
  height: 100px;
  display: flex;
  justify-content: space-evenly;
  margin-top: 3px;
  margin-bottom: 4px;
}
.top-tier{
  background-color: yellow;
}
.middle-tier{
  background-color: greenyellow;
}
.bottom-tier{
  background-color: brown;
}
.worst-tier{
  background-color: red;
}

결과

 

 

 

출처

https://github.com/GavinLonDigital/RankingApp/tree/main

GitHub - GavinLonDigital/RankingApp: This repository is part of a video course on React and .NET Web API

https://www.youtube.com/watch?v=4RKuyp_bOhY