EmpFile.js
import emps from "./emps.json";
function EmpFile() {
const filtered = emps.list.filter(emp => emp.dept == 20);
console.log(filtered);
function GetTR(emp) {
return <tr key={emp.num}><td>{emp.num}</td><td>{emp.name}</td><td>{emp.phone}</td></tr>
}
return (
<>
<h1>테이블에 데이터 표시하기</h1>
<table>
<thead>
<tr><th>번호</th><th>이름</th><th>전화</th></tr>
</thead>
<tbody>
{
filtered.map(emp =>
//<GetTR num={emp.num} name={emp.name} phone={emp.phone} />
GetTR(emp)
)
}
</tbody>
</table>
</>
);
}
export default EmpFile;
emps.json
{
"list": [
{ "id": 11, "num": 11, "name": "Smith", "phone": "010-2149-3214", "dept": 20 },
{ "id": 12, "num": 12, "name": "Lora", "phone": "010-2547-5498", "dept": 20 },
{ "id": 13, "num": 13, "name": "Jone", "phone": "010-2193-2594", "dept": 30 },
{ "id": 14, "num": 14, "name": "Scott", "phone": "010-2368-95474", "dept": 40 }
]
}