[DAY - 78] #1 선수 정보 프로젝트

react를 이용해 드라마 등장인물, 운동선수, 회원 정보 등의 소개를 할 수 있는 프로젝트를 진행했다.

나는 내가 좋아하는 스포츠 팀을 선택했고 각 선수들의 사진, 정보가 출력될 수 있도록 했다.

src	┌	assets	-	api	┌	DoosanData.js
	│					└	DoosanStatData.js
	└	doosan	┌	Main.js
    			├	DoosanList.js	-	DoosanItem.js
        	        └	DoosanInfo.js	┌	DoosanImg.js
                				└	DoosanMenu.js	-	DoosanCon.js	┌	DoosanProfile.js
                										├	DoosanStat.js
                                                                        			├	DoosanClub.js
                                                                        			├	DoosanNews.js
                                                                        			└	DoosanYoutube.js

export default [
    {
        id: 1,
        no: 53,
        nameno: 'ysh53',
        imgurl: "./images/ysh53.png",
        name: "양석환",
        position: "내야수",
        birth: '1991년 7월 15일',
        birth2: '경기도 의왕시',
        nation: '대한민국',
        eb: '백운초 - 신일중 - 신일고 - 동국대',
        phy: '185cm | 90kg | AB형',
        po: '1루수',
        pro: '2014년 2차 3라운드 (전체 28번, LG)',
        images: [
            { tn: "./images/ysh53/ysh53-1.jpg" },
            { tn: "./images/ysh53/ysh53-2.jpg" },
            { tn: "./images/ysh53/ysh53-3.jpg" },
        ],
        club: [
            { c: 'LG 트윈스 (2014~2021)' },
            { c: '상무 피닉스 야구단 (2019~2020)' },
            { c: '두산 베어스 (2021~)' },
        ],
        youtube: [
            { yt: "8GMe239jPIo" },
            { yt: "bKHnrS795ss" },
            { yt: "x4RJfDlIPBo" }
        ],
    },
    
    .
    .
    .

data의 경우 위와 같이 작성했다.

image와 club, youtube 같은 경우 map을 사용해야 하므로 같은 키 값을 주었다.

profile

club

stats

youtube

stat의 경우 아래와 같이 data를 받다보니 다른 data처럼 table tr th td에 map을 할 수 없었다.

export const kdh37 = [
    { 연도: 2019, 팀명: "두산", 타율: 0.000, 경기: 19, 타석: 18, 타수: 15, 득점: 4, 안타: 0, 홈런: 0, 타점: 0, 타율: 0.000, 장타율: 0, 출루율: 0.167 },
    { 연도: 2022, 팀명: "두산", 타율: 0.240, 경기: 51, 타석: 110, 타수: 96, 득점: 13, 안타: 23, 홈런: 4, 타점: 11, 장타율: 0.448, 출루율: 0.315 }
]

<thead>
        <tr>
          <th colSpan={12} className='noth'>두산베어스 NO.{data.no}</th>
        </tr>
        <tr>
          <th colSpan={12} className='nameth'>{data.name}</th>
        </tr>
        <tr className='kbologo'>
          <th colSpan={12}>
            <a href="https://www.koreabaseball.com/Record/Player/HitterBasic/Basic1.aspx">
              <img src="./images/kbologo.png" alt="kbologo" />
            </a>
          </th>
        </tr>
        <tr>
          {Object.keys(statData[0]).map((key) => (
            <th key={key} className='stats'>{key}</th>
          ))}
        </tr>
</thead>

따라서 thead부분의 th을 작성하기 위해 statData의 key를 가져왔다.

          {Object.keys(statData[0]).map((key) => (
            <th key={key} className='stats'>{key}</th>
          ))}

Object를 사용해 statData의 0번 index를 배열로 만든 뒤 key값만 출력해 준다.

thead

tbody의 경우 key값이 아닌 value값만 필요한데 아래와 같이 작성하면 반대로 value 값만 가져올 수 있었다.

      <tbody>
        {statData.map((row, index) => (
          <tr key={index}>
            {Object.values(row).map((value, index) => (
              <td key={index}>{value}</td>
            ))}
          </tr>
        ))}
      </tbody>

tbody