React, 출석부 출력하기, List 와 Key

AttendanceBook.jsx

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((item) => {
                return <li key={item.id}>{item.name}</li>
                // 포맷팅된 문자열로도 가능
                // return <li key={`student-id-${item.id}`}>{item.name}</li> 
            })}
        </ul>
    );
}

export default AttendanceBook;

 

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import PlayGround from "./chapter_00/PlayGround";

import AttendanceBook from "./chapter_10/AttendanceBook";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
    <React.StrictMode>
        <AttendanceBook />
    </React.StrictMode>
);

reportWebVitals();

// https://github.com/soaple/first-met-react-practice-v18/tree/master/src

 

결과

 

* Map 함수의 엘리먼트는 Key 값이 항상 있어야한다.

 

출처

https://www.inflearn.com/course/처음-만난-리액트

https://github.com/soaple/first-met-react-practice-v18/tree/master/src