소플의 처음 만난 리액트_실습8
![](https://t1.daumcdn.net/keditor/emoticon/face/large/073.png)
리스트
- 같은 아이템을 순서대로 모아놓은 것
키
- 각 객체나 아이템을 구분할 수 있는 고유값
- id 사용 (주로 많이 씀)
- index 사용 (순서가 바뀔 수 있는 경우에는 권장x, 키를 명시적으로 넣지 않았을 때 사용)
여러 개의 컴포넌트 렌더링
- map() 함수 사용 : 각 변수에 어떤 처리를 한 뒤 결과를 배열로 만들어서 리턴함
- map() 함수 안에 있는 엘리먼트는 꼭 키가 필요함
출석부 출력하기 실습
//AttendanceBook.jsx
import React from "react";
//배열 생성
const students = [
{
id: 1,
name: "Chumji",
},
{
id: 2,
name: "Steve",
},
{
id: 3,
name: "Bill",
},
{
id: 4,
name: "Jeff",
},
];
//map함수를 사용해 students 데이터 순서대로 접근, key로 id설정
function AttendanceBook(props) {
return(
<ul>
{students.map((student)=> {
return <li key={student.id}>{student.name}</li>
})}
</ul>
)
}
export default AttendanceBook;
반응형
'개발로그 > React' 카테고리의 다른 글
소플의 처음 만난 리액트_실습10 (0) | 2023.08.02 |
---|---|
소플의 처음 만난 리액트_실습9 (0) | 2023.08.01 |
소플의 처음 만난 리액트_실습7 (0) | 2023.07.31 |
소플의 처음 만난 리액트_실습6 (0) | 2023.07.31 |
소플의 처음 만난 리액트_실습5 (0) | 2023.07.11 |
댓글