[React]13. 축구선수 정보 홈페이지 실습

React_13_축구선수 정보 홈페이지 실습

 

[환경설정]

• 라우터, axios 설치

 

 

• index.js에서 <App>을 BrowserRouter로 감싸고  BrowserRouter import하기

 

 

• player.json 선수정보 추가하기

  대한축구협회 https://www.kfa.or.kr/national/?act=nt_man

 

※이미지 주소 복사 안 되는 경우 이미지 가져오는 방법

F12(개발자도구)-요소 클릭-url 복사하기

 

[Player.jsx]

• import: useEffect, useState, axios, Routes, Route, 컴포넌트

 

1. public 폴더 내 json 파일에서 데이터 가져오기

• 선수데이터를 담을 state 생성하기

 

 

 

• json 파일에 접근하여 선수데이터를 state에 저장(useEffect, axios 활용)

 

 

2. 라우팅 설정하기: Routes-Route

 

 

3. 선수데이터를 담은 list state [List.jsx]로 전송

 

 

[Main.jsx]메인홈페이지 

• import

 

 

• Player List 문자 클릭 시 List 컴포넌트로 이동

 

 

 

[List.jsx]선수정보 목록

• [Player.jsx]에서 전송한 list state 값 매개변수로  받아오기

 

 

• map함수와 props 기능 활용하여 [Item.jsx]로 list state 값 전송

 

 

• 추가실습: position이 MF인 선수들만 출력하기

 

[Item.jsx]개별 선수 정보 출력

• List 컴포넌트에서 전송한 list state(item)값 받아오기

 

 

• 선수이미지(imgSrc), 선수이름(name), 포지션(position) table 태그로 출력하기

 

 

 

※react에서 table 태그→<tbody> <thead>나 <tfoot> 필수적으로 입력

 

 

<선수 프로필 카드 클릭 시 상세페이지에서 선수별 정보 출력하기 위한 단계>

 

[Player.jsx] Detail 컴포넌트 경로 뒤에 인덱스 부여, list state Detail 컴포넌트로 전송

 

 

[List.jsx] 페이지경로에 선수들을 구별할 수 있는 index값을 [Item.jsx]로 전송

 

 

[Item.jsx] 선수 프로필 카드 클릭 시 상세페이지(Detail.jsx)로 이동하여 개별 선수정보 출력

 

• useNavigate 선언, import
• useNavigate 이동경로에 이동할 컴포넌트 작성,  index값 추가

 

 

[Detail]선수별 상세정보 출력(이름/포지션/나이/키/몸무게/소속팀))

•  [Player.jsx]에서 전송한 list state값 받아오기

 

 

• useParams 선언, import

 

 

• list를 index로 구분하여 각 속성값 출력

-[Item.jsx]에서 생성한 <table> 태그 가져와서  속성 추가