리스트와 키, map()

intro

리스트와 키 그 자체를 공부하는 단원은 아님.
둘을 이용해 렌더링을 하는 방식을 공부.

map()의 활용

javascript

import React from "react";

const students = [
    {
        id : 1,
        name : 'Inje',
    },
    {
        id : 2,
        name : 'Steve',
    },
    {
        id : 3,
        name : 'Bill',
    },
    {
        id : 4,
        name : 'Jeff',
    },
];

function AttendanceBook(props) {
    return (
        <ul>
            {students.map((student) => {
                return <li key={student.id}>{student.name}</li>;
            })}
        </ul>
    );
}

export default AttendanceBook;

리스트에는 key와 value를 동시에 넣는 것이 좋다.
- 여기서는 id라는 이름으로 넣어준다.
- 넣어주지 않으면 개발자 도구에서 오류가 뜬다.
그렇게 만든 key를 엘리먼트의 key에 넣어주면 된다.
- 엘리먼트의 key : <> 안에 key라고 적고 넣기.