[React] input 여러개의 이벤트 감지하기

import React, { useState } from 'react';

const EventPractice = () => {
    const [form, setForm] = useState({ // 객체 형식의 useState를 생성하여 여러 개의 입력 값을 받을 수 있도록 한다
        username:'', // <input name='username'/> 요소의 입력 값을 받을 key-value
        message:'', // 위와 동일
    });
    const {username, message} = form; // form 객체를 비구조화 할당하여 이후 form.username이 아닌 username으로 사용 가능
    const onChange = (e) => {
        const nextForm = {
            ...form, // 기존 form을 복사하여
            [e.target.name] : e.target.value // event가 발생한 input 요소의 name 값을 입력값으로 변경
            // 즉, 이벤트가 <input name='username'/> 에서 발생했다면 form 객체의 username 키의 value를 이벤트 입력 값으로 변경한다.
        };
        setForm(nextForm); // state 갱신
        console.log(nextForm); // 기능 확인
    }
    return (
        <div>
            <input
                type='text'
                name='username' // name을 username으로 설정하여 form 객체의 username 키의 값을 변경할 수 있도록한다
                placeholder='사용자명'
                value={username} // form 객체의 username 키의 value에 해당하는 값을 value로 사용
                onChange={onChange} // onChange 시에 onChange 함수 호출
            ></input>
            <input
                type='text'
                name='message'
                placeholder='메세지'
                value={message} // 위와 동일
                onChange={onChange} // 위와 동일
            ></input>
        </div>
    );
};

export default EventPractice;