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

페이지 생성

• ClientApp/src 디렉터리 아래에 RankItem.js 파일 생성

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

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

    useEffect(()=>{
        fetch(`item/${dataType}`)
        .then((results)=>{
            return results.json();
        })
        .then(data=>{
            setItems(data);
        })
    },[])
    
    return (
        <main>
            <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;

 

React Router와 컴포넌트 연결

• src 디렉터리에 존재하는 AppRoutes.js를 아래와 같이 수정

import { Counter } from "./components/Counter";
import { FetchData } from "./components/FetchData";
import { Home } from "./components/Home";
import RankItems from "./components/RankItems";

const AppRoutes = [
  {
    index: true,
    element: <Home />
  },
  {
    path: '/counter',
    element: <Counter />
  },
  {
    path: '/fetch-data',
    element: <FetchData />
  },
  {
    path: '/rank-items',
    element: <RankItems />
  }
];

export default AppRoutes;

• 네비게이션 메뉴를 수정하기 위해 src/componets/NavMenu.js를 아래와 같이 수정

import React, { Component } from 'react';
import { Collapse, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
import { Link } from 'react-router-dom';
import './NavMenu.css';

export class NavMenu extends Component {
  static displayName = NavMenu.name;

  constructor (props) {
    super(props);

    this.toggleNavbar = this.toggleNavbar.bind(this);
    this.state = {
      collapsed: true
    };
  }

  toggleNavbar () {
    this.setState({
      collapsed: !this.state.collapsed
    });
  }

  render() {
    return (
      <header>
        <Navbar className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3" container light>
          <NavbarBrand tag={Link} to="/">RankingApp</NavbarBrand>
          <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
          <Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={!this.state.collapsed} navbar>
            <ul className="navbar-nav flex-grow">
              <NavItem>
                <NavLink tag={Link} className="text-dark" to="/">Home</NavLink>
              </NavItem>
              <NavItem>
                <NavLink tag={Link} className="text-dark" to="/counter">Counter</NavLink>
              </NavItem>
              <NavItem>
                <NavLink tag={Link} className="text-dark" to="/fetch-data">Fetch data</NavLink>
              </NavItem>
              <NavItem>
                <NavLink tag={Link} className="text-dark" to="/rank-items">Rank Items</NavLink>
              </NavItem>
            </ul>
          </Collapse>
        </Navbar>
      </header>
    );
  }
}

• React proxy 수정

const { createProxyMiddleware } = require('http-proxy-middleware');
const { env } = require('process');

...

const context =  [
  "/weatherforecast",
  "/item",
];

module.exports = function(app) {
  const appProxy = createProxyMiddleware(context, {
    target: target,
    secure: false,
    headers: {
      Connection: 'Keep-Alive'
    }
  });

  app.use(appProxy);
};

이미지 불러오기

• src/MovieImages.js를 생성

import Godfather from '../images/movies/Godfather.png';
import Highlander from '../images/movies/Highlander.png';
import Highlander2 from '../images/movies/Highlander2.png';
import LastOfTheMohicans from '../images/movies/LastOfTheMohicans.png';
import PoliceAcademy6 from '../images/movies/PoliceAcademy6.png';
import RearWindow from '../images/movies/RearWindow.png';
import RoadHouse from '../images/movies/RoadHouse.png';
import Shawshank from '../images/movies/Shawshank.png';
import StarTrack4 from '../images/movies/StarTreck4.png';
import Superman4 from '../images/movies/Superman4.png';

const MovieImageArr = [
    { id: 1, image: Godfather },
    { id: 2, image: Highlander },
    { id: 3, image: Highlander2 },
    { id: 4, image: LastOfTheMohicans },
    { id: 5, image: PoliceAcademy6 },
    { id: 6, image: RearWindow },
    { id: 7, image: RoadHouse },
    { id: 8, image: Shawshank },
    { id: 9, image: StarTrack4 },
    { id: 10, image: Superman4 },

];

export default MovieImageArr;

CSS 꾸미기

• custom.css를 아래와 같이 수정

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

code {
  color: #E01A76;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.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%;
}

결과

 

 

 

 

 

출처

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