여러 개의 input이 있을 때 useState를 사용하는 경우

출처: https://velog.io/@jengyoung/%EC%97%AC%EB%9F%AC-%EA%B0%9C%EC%9D%98-input%EC%9D%B4-%EC%9E%88%EC%9D%84-%EB%95%8C-useState%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%9C%EB%8B%A4%EB%A9%B4

import React, { useState } from 'react'

const EventPractice = () => {
    const [form, setForm] = useState({
        username: '',
        message: ''
    })
    const {username, message} = form;
    const onChange = e => {
        const nextForm = {
            ...form, // 기존 값 복사
            [e.target.name]: e.target.value // 이 자리에 덮어 씌우기
        }
        setForm(nextForm);
    }
    const onClick = () => {
        alert(username + ': ' + message);
        setForm({
            username: '',
            message: ''
        })
    };
    const onKeyPress = e => {
        if (e.key === 'Enter') {
            onClick();
        }
    }
    return (
        <div>
            <h1>이벤트 연습</h1>
            <input 
                type="text"
                name="username"
                placeholder="사용자명"
                value={username}
                onChange={onChange}
            />
            <input
                type="text"
                name="message"
                placeholder="아무거나 입력해 보세요"
                value={message}
                onChange={onChange}
                onKeyPress={onKeyPress}
            />
            <button onClick={onClick}>확인</button>
        </div>
    );
};

export default EventPractice;