03. 리액트 list 랜더링과 key 값 설정하기

import React from "react";

const students = [

    {

        id:1,

        name:"hyeji",

    },

    {

        id:2,

        name:"sehyun",

    },

    {

        id:3,

        name:"chunghwan",

    },

    {

        id:4,

        name:"sunyoung",

    },

];

function AttendanceBook(props) {

    return(

        <ul>

            {students.map((student) => {

                return <li key={student.id}>{student.name}</li>

            })}

        </ul>

    );

}

export default AttendanceBook;

리스트를 랜더링 할때는 map을 사용하며 리스트에는 반드시 id 등을 통한 key 값이 포함 되어야 한다.