import React, { useState, useRef } from 'react';

export default function TestPage() {
    const inputRef = useRef(null)
    const [userList, setUserList] = useState([
        { id: 1, name: "Mike" },
        { id: 2, name: "Tom" },
        { id: 3, name: "Jane" },
        { id: 4, name: "Paul" },
    ]);

    function pushNewUser() {
        setUserList([
            {
                id: userList.length + 1,
                name: inputRef.current.value,
            },
            ...userList,
        ])
    }

return (
    <div>
        {userList.map((user, index) => (
            <input
            key = {user.id}
            type = 'text'
            placeholder = {user.name}
            style = {{ display : "block" }}
            />
        ))}
        <input type = 'text' ref = {inputRef} />
        <button onClick = {}>등록</button>
    </div>
    );
}

input으로 받은 새로운 값을 객체의 마지막 값으로 추가할 때는 key를 그냥 index로 주어도 상관이 없지만 새로운 input 값을 맨 앞에 추가할때와 같은 경우에는 원하는 값을 얻을 수 없기 때문에 그냥 key값을 index가 아닌 user.id로 지정해 주어야 한다.

index로 주면 새로운 input이 추가될때 실제로는 맨 앞에 input이 추가 되는 것이 아니라 맨 뒤에 input이 추가 되고 모든 값이 하나씩 뒤로 밀리는 것과 같다.

user.id와 같이 unique한 값을 주어야만 맨 앞에 input이 추가 되면서 그 값이 추가 되어 훨씬 더 효과적인 코드가 된다.