[소플의 처음 만난 리액트] 10장 실습문제

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((student) => {
        return <li key={student.id}>{`name: ${student.name}, id: ${student.id}`}</li>;
      })}
    </ul>
  );
}

export default AttendanceBook;

핵심 키워드

• 리스트는 같은 아이템을 순서대로 모아 놓은 것이다.

• 키는 각 객체나 아이템을 구분할 수 있는 고유한 값이다.

• 여러 개의 컴포넌트를 렌더링하기 위해서는 map()함수를 사용한다.

• 키 값을 사용하는 방법에는 숫자 값, id, 인덱스를 사용하는 방법이 있다. 리액트에서는 키를 명시적으로 넣어주지 않으면 기본적으로 인덱스 값을 키값으로 가진다.

결론!