여러개의 Input

import React,{useState} from 'react';

function InputSample(){

    const [inputs, setInputs] = useState({
        name : '',
        nickname : ''
    });
    const {name, nickname} = inputs;
    
    const onChange = (e) => {
        const {name, value} = e.target;
        // console.log(e.target.name);
        // console.log(e.target.value);
        // e.target 값으로 name과 value 값을 불러온다.
        // 콘솔창에는 name과 입력값이 출력된다.

        //상태 업데이트 할 때 기존에는 setInputs(value);를 사용했지만
        //객체상태 일 때는 기존의 객체를 복사해야한다. 
        //name값에 []를 사용하면 name 값에 따라 value값이 정해지게 된다
        // const nextInputs = {
        //     ...inputs,
        //     [name]: value,
        // };
        // setInputs(nextInputs);

        setInputs({
            ...inputs,
            [name]: value,
        });
    };

    const onReset = () => {
        setInputs({
            name: '',
            nickname: ''
        })
    }

    return(
        <div>
            <input 
            name='name' 
            placeholder="이름" 
            onChange={onChange} 
            value={name}
            />
            <input 
            name='nickname' 
            placeholder="닉네임" 
            onChange={onChange} 
            value={nickname}
            />
            <button onClick={onReset}>초기화</button>
            <div>
                <b>값: </b>
                {name} ({nickname})
            </div>
        </div>
    )
}

export default InputSample;