배열 랜더링

import React from 'react';

function User({ user }){
    return (
        <div>
            <b>{user.username}</b> <span>({user.email})</span>
        </div>
    )
}

function UserList() {

    const users = [
        {
            id: '1',
            username: 'sjho0428',
            email: 'sjho0428@gmail.com'
        },
        {
            id: '2',
            username: 'tester',
            email: 'tester@gmail.com'
        },
        {
            id: '3',
            username: 'everton',
            email: 'everton@gmail.com'
        }
    ];

    return(
        <div>
            {
                users.map(
                    user => (<User user={user} key={user.id}/>)
                    // key 값을 넣어야한다
                    // 각 원소들에게 고유값을 주어서 리랜더링 성능을 최적화한다
                    // key 값으로 id가 없을 경우 map의 두번째 인자 index를 사용해도 된다.
                    // index 사용은 경고메세지만 없어지지 성능적으로는 의미없다.
                )
            }
        </div>
    )
}

export default UserList;