소플의 처음 만난 리액트_실습8

소플의 처음 만난 리액트_실습8

---

리스트

- 같은 아이템을 순서대로 모아놓은 것

 

키

- 각 객체나 아이템을 구분할 수 있는 고유값

- 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;

students의 목록이 차례대로 출력된다.