1시간 안에 React로 축구 앱을 만들어 봅시다

오늘 우리는 리액트로 축구 앱을 만들 것입니다. 이것이 우리가 달성하려는 최종 결과입니다Football-app. 그럼 시작하겠습니다.

먼저 다음 명령으로 반응 앱을 만들어야 합니다.

npx create-react-app footballapp

그런 다음 종속성을 설치해야 합니다.

npm install axios react-bootstrap bootstrap

이제 상용구 코드를 정리하고 새로 시작하겠습니다. 이것은 우리의 주요 App.js 파일입니다.

import Navigation from "./components/Navigation";
import Header from "./components/Header";
import Standings from "./components/Standings";
import Highlights from "./components/Highlights";
import Button from "./components/Button";
import Transfer from "./components/Transfer";
import 'bootstrap/dist/css/bootstrap.min.css';

  return (
    <>
    <Navigation />
    <Button /> {* BackToTop Button *}
    <Header />
    <Standings /> {* Important Part *}
    <Transfer />
    <Highlights />
    </>
  );
}

export default App;

이 튜토리얼에서 이러한 구성 요소를 모두 다루는 것은 불가능하므로 리그 순위가 표시되는 순위 구성 요소를 다룰 것입니다.



먼저 스탠딩 구성 요소에 대해 알아보겠습니다. 프로젝트에 사용할 API를 소개하겠습니다. 다음은 API-link 입니다. 이것이 작동 방식입니다. "[GET] https://api-football-standings.azharimm.site/leagues "은 다음 샘플 데이터를 제공합니다.



보시다시피 사용 가능한 모든 리그와 리그 ID를 반환합니다. 따라서 순위 구성 요소에서 다음과 같은 기본값으로 세 가지 상태를 만들어야 합니다.

const [league, setLeague] = React.useState();
const [id, setId] = React.useState('eng.1');
const [season, setseason] = React.useState('2022');
const [tournament, setTournament] = React.useState('Premier League');

이제 우리는 데이터를 가져옵니다
예제 코드:

useEffect(() =>{
    axios.get('https://api-football-standings.azharimm.site/leagues').then(res => {
        setLeague(res.data.data)
    }).catch(err =>{
        console.log(err)
    })
},[])

사용자가 원하는 리그를 선택할 수 있는 드롭다운 메뉴를 만들어 보겠습니다.

{/* League drop down menu */}
    <Dropdown>
      <Dropdown.Toggle variant="primary">
        Select League
      </Dropdown.Toggle>

    <Dropdown.Menu>
      {league && league.map((league, key) =>{
        return <Dropdown.Item key={key} onClick={() =>{
          setId(league.id)
          setTournament(league.name)
        }}>{league.name}</Dropdown.Item>
      } )}

    </Dropdown.Menu>
  </Dropdown>

드롭다운 구성 요소는 부트스트랩에서 제공됩니다. 따라서 이를 파일로 가져오는 것을 잊지 마십시오(axios도 가져오는 것을 잊지 마십시오). 필요한 모든 리그 이름이 포함된 '리그' 상태를 통해 매핑하고 있음에 유의하십시오.
이제 '연도 선택' 드롭다운 메뉴에 대해 동일한 작업을 수행해 보겠습니다.

const year = ['2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022'];

2010년부터의 모든 데이터를 제공합니다.

{/* Year dropdown menu */}
    <Dropdown>
      <Dropdown.Toggle variant="primary">
        Select Season
      </Dropdown.Toggle>

    <Dropdown.Menu>
      {year && year.map((year, key) =>{
        return <Dropdown.Item key={key} onClick={() =>{
          setseason(year)
        }}>{year}</Dropdown.Item>
      })}
    </Dropdown.Menu>
  </Dropdown>

이제 중요한 부분인 Table 구성 요소입니다. 테이블 구성 요소를 만들고 데이터를 소품으로 전달해 봅시다.

<Table season={season} id={id} tournament={tournament}/>

이것은 테이블 구성 요소입니다.

  const [team, setteam] = React.useState();

    useEffect(() =>{
        axios.get(`https://api-football-standings.azharimm.site/leagues/${props.id}/standings?season=${props.season}&sort=asc`)
        .then(res => {
            setteam(res.data.data.standings)
        }).catch(err =>{
            console.log(err);
        })
    },[props.id, props.season])

ID와 시즌이 변경될 때마다 useEffect 함수를 호출합니다.

jsx 코드는 다음과 같습니다.

  return (
    <>
<div className='tournament'>{props.tournament} - Season {props.season}</div>

  <div style={{
    display:'flex',
    alignItems:'center',
    justifyContent:'center',
  }}><Table striped hover responsive size={window.innerWidth > 556?'lg':'sm'}>
  <thead>
    <tr>
      <th>#</th>
      <th>Logo</th>
      <th>Name</th>
      <th>Wins</th>
      <th>Loss</th>
      <th>Draws</th>
      <th>Games</th>
      <th>GF</th>
      <th>GA</th>
      <th>Points</th>
    </tr>
  </thead>
  <tbody>
    {team && team.map((team, key) =>{
      return <tr key={key}>
        <td>{key + 1}</td>
        <td><img src={team.team.logos[0].href} alt='team logo' width={window.innerWidth > 556?40:15} height={window.innerWidth > 556?40:15}/></td>
        <td>{team.team.name}</td>
        <td>{team.stats[0].value}</td> {/* wins */}
        <td>{team.stats[1].value}</td> {/* loss */}
        <td>{team.stats[2].value}</td> {/* draws */}
        <td>{team.stats[3].value}</td> {/* games */}
        <td>{team.stats[4].value}</td> {/* GF */}
        <td>{team.stats[5].value}</td> {/* GA */}
        <td style={{
          fontWeight: 'bold'
        }}>{team.stats[6].value}</td> {/* points */}
      </tr>
    })}
  </tbody>
</Table></div>

</>
  )

첫눈에 코드를 이해하지 못하더라도 크게 걱정할 필요가 없습니다. 여기서는 기본적으로 부트스트랩의 테이블 구성 요소를 사용하고 있습니다. 테이블에는 api에서 얻은 데이터로 채워진 "th"값과 "td"값이 있습니다. 또한 테이블의 응답성을 높이기 위해 삼항 연산자를 추가했습니다.

 size={window.innerWidth > 556?'lg':'sm'}

코드에 심각한 스타일을 추가하지 않았습니다. 그래서 나는 그것을 당신에게 맡길 것입니다.