반복문을 활용한 예제(2)

ul-li 태그 반복하여 출력하기

function H_Book() {

   

  const students = [

    {

      id: 1,

      name: "Inje",

    },

    {

      id: 2,

      name: "Steve",

    },

    {

      id: 3,

      name: "Bill",

    },

    {

      id: 4,

      name: "Jeff",

    },

  ];

  //   변수정의

  const [student, setStudent] = useState(students);

  return (

    <div>

      <ul class="list-group">

        {/* 반복문 : 여기서 돌리면 됨 */}

        {student.map((value, index) => {

          return (

          <li class="list-group-item">{value.name}</li>

          );

        })}

      </ul>

    </div>

  );

}

export default H_Book;