JSX

1.myschool.json을 이용해서 학과목록, 교수목록, 학생목록 표를 다음과 같이 구현하시오.

저장된 json 파일로 표 구현하기, 데이터에 바로 map돌려서 구현해내니까 꽤나 편리하다!

App.js

import React from 'react';
import {Link,Routes,Route} from 'react-router-dom';
import Department from './pages/Department';
import Professor from './pages/Professor';
import Student from './pages/Student';

const App = () => {
  return (
    <div>
      <h1>Exam03</h1>
      <nav>
        <Link to="/department"><strong>학과목록</strong></Link>&nbsp;|&nbsp;
        <Link to="/professor"><strong>교수목록</strong></Link>&nbsp;|&nbsp;
        <Link to="/student"><strong>학생목록</strong></Link>
      </nav>
      <hr />
      <Routes>
        <Route path="/department" element={<Department />} />
        <Route path="/professor" element={<Professor />} />
        <Route path="/student" element={<Student />} />
      </Routes>
    </div>
  );
};

export default App;

Department.js

import React from 'react';
import data from '../myschool';

const Department = () => {
  return (
    <div>
        <table border="1" cellPadding="7">
            <thead>
                <tr>
                    <td><strong>학과번호</strong></td>
                    <td><strong>학과이름</strong></td>
                    <td><strong>위치</strong></td>
                </tr>
            </thead>
            <tbody>
                {data.department.map((v,i) => {
                    return (
                    <tr>
                        <td>{v.id}</td>
                        <td>{v.dname}</td>
                        <td>{v.loc}</td>
                    </tr>)
                })}
            </tbody>
        </table>
    </div>
  );
};

export default Department;

Professor.js

import React from 'react';
import data from '../myschool';

const Professor = () => {
  return (
    <div>
        <table border="1" cellPadding="7">
            <thead>
                <tr>
                    <td><strong>교수번호</strong></td>
                    <td><strong>교수이름</strong></td>
                    <td><strong>아이디</strong></td>
                    <td><strong>직급</strong></td>
                    <td><strong>급여</strong></td>
                    <td><strong>입사일</strong></td>
                    <td><strong>보직수당</strong></td>
                    <td><strong>소속학과번호</strong></td>
                </tr>
            </thead>
            <tbody>
                {data.professor.map((v,i) => {
                    return (
                    <tr>
                        <td>{v.id}</td>
                        <td>{v.name}</td>
                        <td>{v.userid}</td>
                        <td>{v.position}</td>
                        <td>{v.sal}</td>
                        <td>{v.hiredate.substring(0,10)}</td>
                        <td>{v.comm}</td>
                        <td>{v.deptno}</td>
                    </tr>)
                })}
            </tbody>
        </table>
    </div>
  );
};

export default Professor;

Student.js

import React from 'react';
import data from '../myschool';

const Student = () => {
  return (
    <div>
        <table border="1" cellPadding="7">
            <thead>
                <tr>
                    <td><strong>학생번호</strong></td>
                    <td><strong>학생이름</strong></td>
                    <td><strong>아이디</strong></td>
                    <td><strong>학년</strong></td>
                    <td><strong>주민번호</strong></td>
                    <td><strong>생년월일</strong></td>
                    <td><strong>연락처</strong></td>
                    <td><strong>키</strong></td>
                    <td><strong>몸무게</strong></td>
                    <td><strong>소속학과번호</strong></td>
                    <td><strong>담당교수번호</strong></td>
                </tr>
            </thead>
            <tbody>
                {data.student.map((v,i) => {
                    return (
                    <tr>
                        <td>{v.id}</td>
                        <td>{v.name}</td>
                        <td>{v.userid}</td>
                        <td>{v.grade}</td>
                        <td>{v.birthdate.substring(2,10).replaceAll('-','')+"-*******"}</td>
                        <td>{v.birthdate.substring(0,10)}</td>
                        <td>{v.tel}</td>
                        <td>{v.height}</td>
                        <td>{v.weight}</td>
                        <td>{v.deptno}</td>
                        <td>{v.profno}</td>
                    </tr>)
                })}
            </tbody>
        </table>
    </div>
  );
};

export default Student;

실행화면