props

1. myschool.json을 이용하여 학년별 성적표를 구현하시오. 이 때 브라우저의 타이틀바에 React 연습문제라고 타이틀 표시가 되어야 한다.

props로 테이블 요소 데이터를 구조분해하여 다 지정해놓고 Table컴포넌트에서는 map만 돌려서 하니까 편하긴 하다 지금은 데이터가 적지만 나중에 많은 양의 데이터를 다룰 때는 유용할 것 같다.

Meta.js

import React from 'react'
import {Helmet,HelmetProvider} from 'react-helmet-async';

const Meta = (props) => {
  return (
    <HelmetProvider>
      <Helmet>
        <meta charset='utf-8' />
        <title>{props.title}</title>
        {/* SEO 태그 */}
        <meta name='description' content={props.description} />
        <meta name='keywords' content={props.keywords} />
        <meta name='author' content={props.author} />
        <meta property='og:type' content='website' />
        <meta property='og:title' content={props.title} />
        <meta property='og:description' content={props.description} />
        <meta property='og:image' content={props.image} />
        <meta property='og:url' content={props.url} />
      </Helmet>
    </HelmetProvider>
  );
};

Meta.defaultProps = {
  title: 'React 연습문제',
  description: 'React 연습문제입니다.',
  keywords: 'React',
  author: '호쌤',
  url: window.location.href
};

export default Meta;

GradeData.js

const GradeData = {
    "1학년": [
        { "이름": "철수", "성별": "남자", "국어": 98, "영어": 78, "수학": 88, "과학": 64 },
        { "이름": "민수", "성별": "남자", "국어": 92, "영어": 70, "수학": 76, "과학": 78 }
    ],
    "2학년": [
        { "이름": "영희", "성별": "여자", "국어": 88, "영어": 78, "수학": 62, "과학": 72 },
        { "이름": "하영", "성별": "여자", "국어": 78, "수학": 83, "과학": 91 },
        { "이름": "철호", "성별": "남자", "국어": 91, "영어": 98, "수학": 82, "과학": 76 }
    ],
    "3학년": [
        { "이름": "수현", "성별": "여자", "국어": 63, "영어": 60, "수학": 61 },
        { "이름": "철희", "성별": "남자", "국어": 82, "영어": 88, "수학": 80, "과학": 85 },
        { "이름": "민희", "성별": "남자", "국어": 95, "영어": 81, "수학": 90, "과학": 70 },
        { "이름": "수진", "성별": "남자", "국어": 91, "영어": 90, "수학": 95, "과학": 82 }
    ],
    "4학년": [
        { "이름": "호영", "성별": "남자", "국어": 88, "영어": 50, "과학": 88 }
    ],
};

export default GradeData;

GradeTable.js

import React from 'react';
import GradeItem from './GradeItem';
import GradeData from './GradeData';
import {useParams} from 'react-router-dom';
import Meta from './Meta';

const GradeTable = () => {
    const {level} = useParams();
    const table = GradeData[`${level}학년`];
    return (
        <div>
            <Meta title={`${level}학년 ::: React 연습문제`} />
            <h2>{level}학년</h2>
            <table border="1" cellPadding="7">
                <thead>
                    <tr align="center">
                        <td>이름</td>
                        <td>성별</td>
                        <td>국어</td>
                        <td>영어</td>
                        <td>수학</td>
                        <td>과학</td>
                        <td>총점</td>
                        <td>평균</td>
                    </tr>
                </thead>
                <tbody>
                    {table.map((v,i) => {
                        return (
                            <GradeItem key={i} name={v.이름}
                            sex={v.성별} kor={v.국어} eng={v.영어} math={v.수학} sinc={v.과학} />)
                    })}
                </tbody>
            </table>
        </div>
    );  
};

export default GradeTable;

GradeItem.js

import React from 'react';
import PropTypes from 'prop-types';

const GradeItem = ({name,sex,kor,eng,math,sinc}) => {
  const sum = parseInt(kor+eng+math+sinc);
  const avg = parseInt(sum/4);
  return (
    <tr aligh="center">
      <td><strong>{name}</strong></td>
      <td><strong>{sex}</strong></td>
      <td><strong>{kor}</strong></td>
      <td><strong>{eng}</strong></td>
      <td><strong>{math}</strong></td>
      <td><strong>{sinc}</strong></td>
      <td><strong>{sum}</strong></td>
      <td><strong>{avg}</strong></td>
    </tr>
  );
};

GradeItem.propTypes = {
  name: PropTypes.string.isRequired,
  sex: PropTypes.string.isRequired,
  kor: PropTypes.number.isRequired,
  eng: PropTypes.number.isRequired,
  math: PropTypes.number.isRequired,
  sinc: PropTypes.number.isRequired
};

GradeItem.defaultProps = {
  kor:0,
  eng:0,
  math:0,
  sinc:0
};
export default GradeItem;

실행화면