list and key

list and key

• javascript의 리스트에서는 map()함수를 가지고 있는데 이 안에서 원하는 처리를하고 배열을 만드는 것을 할 수 있다 이는 마치 java stream()을 사용하는 것같다 그리고 리스트 내부에 들어있는 컴포넌트들은 반드시 key를 가져야한다

import React from "react";

const students = [
    {
        id: 1,
        name: 'Crong',
    },
    {
        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;

• 리액트에서는 반드시 고유한 키값을 가져야하는데 보통 id index를 많이 사용한다. easy peasy