[React] 간단실습.03 (롤 챔피언 정보 페이지 만들기)

 

https://developer.riotgames.com/docs/lol

>> 챔피언 목록 만들기

>> 챔피언 이름 클릭하면 상세 페이지 나오게 하기

 

▼ 코드 ▼

App.js

import Champ from './Champ';
import ChampDetail from './ChampDetail'
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <Routes>
          <Route exact path='/' Component={Champ} />
          <Route path='/champions/:id' Component={ChampDetail} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

 

Champ.js

import {Link} from 'react-router-dom';
import React, { useState, useEffect } from "react";
import './ChampionGrid.css';

function Champ() {
    const [champions, setChampions] = useState([]);

    useEffect(() => {
        fetch('https://ddragon.leagueoflegends.com/cdn/13.18.1/data/ko_KR/champion.json')
            .then(response => response.json())
            .then(data => setChampions(Object.values(data.data)));
    }, []);
    
    return (
        <>
            <h2> 챔 목록 </h2>
            <div className="champ-grid">
                {champions.map(champion => (
                    <Link to={`./champions/${champion.id}`} key={champion.key} className="champ-link">  
                        <img src={`http://ddragon.leagueoflegends.com/cdn/img/champion/loading/${champion.id}_0.jpg`} alt="{champion.name}" style={{width:'70px', height:'auto'}} />
                        {champion.name}
                    </Link>
                ))}
            </div>
        </>

    )

}

export default Champ;

 

 ChampDetail.js

import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";

function ChampDetail() {
    const {id} = useParams();
    const [champion, setChampion] = useState(null);

    useEffect(() => {
        fetch(`https://ddragon.leagueoflegends.com/cdn/13.18.1/data/ko_KR/champion/${id}.json`)
        .then(response => response.json())
        .then(data => setChampion(data.data[id]));
    }, [id]);

    if(!champion) {
        return <div> Loading... </div>
    }

    return (
        <>
            <h1> {champion.name} </h1>
            <h2> {champion.title} </h2>
            <p> {champion.blurb} </p>
        </>
    )

}

export default ChampDetail;

 

 ChampionGrid.css

.champ-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 50px;
}

.champ-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 5px;
    width: 200px;
    height: auto;
    padding: 10px;
    background-color: aliceblue;
}

 

 예시)