728x90
App.js
import PersonList from "./components/PersonList";
let persons = [
{name: "홍길동", age: 20},
{name: "이순신", age: 30},
{name: "유관순", age: 40},
{name: "강감찬", age: 50},
]
function App(){
return(
<div>
<h1>학생 정보</h1>
<PersonList A={persons}></PersonList>
</div>
)
}
export default App;
export {persons}; // PersonList에 값 넘겨주기
PersonList.js
import {persons} from "../App"
export default function PersonList(){
return (
<div>
<table border={1}>
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody>
{/* => 뒤에 {return ~~}을 쓰거나 () */}
{persons.map((row, idx) => {
return(
<tr key={idx}>
<td>{idx+1}</td>
<td>{row.name}</td>
<td>{row.age}</td>
</tr>
)
})}
</tbody>
</table>
</div>
)
}
App.js
import PersonList from "./components/PersonList";
let persons = [
{name: "홍길동", age: 20},
{name: "이순신", age: 30},
{name: "유관순", age: 40},
{name: "강감찬", age: 50},
]
function App(){
return(
<div>
<h1>학생 정보</h1>
<PersonList persons={persons}></PersonList>
</div>
)
}
export default App;
PersonList.js
export default function PersonList({persons}){
return (
<div>
<table border={1}>
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody>
{/* => 뒤에 {return ~~}을 쓰거나 () */}
{persons.map((row, idx) => {
return(
<tr key={idx}>
<td>{idx+1}</td>
<td>{row.name}</td>
<td>{row.age}</td>
</tr>
)
})}
</tbody>
</table>
</div>
)
}
'단순 코드 기록 > React' 카테고리의 다른 글
| React_자식에서 데이터 변경 (0) | 2024.03.13 |
|---|---|
| React_스프레드 함수_이중 자식창 (0) | 2024.03.13 |
| React_Avatar_defaultProps (0) | 2024.03.13 |
| React_이미지 사용 (0) | 2024.03.13 |
| React_Avata(외부 데이터 사용 + 스프레드 함수 + Map 함수) (0) | 2024.03.13 |