배열 다루기
- 로컬에 선언된 배열
- Back End에서 전달한 배열(리스트)
- list.map(f); /* f는 list의 원소 각각을 받아서 가공하고 다시 배열로 리턴
list.map(
(v) => <div>{v}</div>
);
ShowArr.js
function ShowArr() {
const title = "배열 다루기";
const names = ["Smith", "Jone", "Ward"];
function proc(val) {
return (
<div key={val}>{val}</div>
);
}
return (
(names.map(
(nm) => {
/* 다른 문장 */
return (<div key={nm}>{nm}</div>);
} // 익명 함수
))
);
}
export default ShowArr;
let list = [{}, {}, {}];
화면에 테이블로 데이터 표시하기
const emps = [
{"empno":11, "name":"Smith", "dept":20},
{"empno":12, "name":"James", "dept":10},
{"empno":13, "name":"Laura", "dept":30}
];
List.js 컴포넌트 생성
- <table> 태그에 emps 의 데이터를 표시해보세요.
function List() {
const emps = [
{ "empno": 11, "name": "Smith", "dept": 20 },
{ "empno": 12, "name": "James", "dept": 10 },
{ "empno": 13, "name": "Laura", "dept": 30 }
];
return (
<table>
<thead>
<tr><th>사번</th><th>이름</th><th>부서</th></tr>
</thead>
<tbody>
{emps.map(
(emp) => {
return (<tr key={emp.empno}>
<td>{emp.empno}</td>
<td>{emp.name}</td>
<td>{emp.dept}</td>
</tr>);
}
)}
</tbody>
</table>
);
}
export default List;