리액트 11강

• onChange가 엘리먼트의 이벤트->이를 함수 onTextChange 에서 e 라는 파라미터로 받아올 수 있고, e.target 은 이벤트가 발생한 DOM 을 가리킴
• setInputs 부분
  • 스프레드를 통해 inputs 객체를 복사한 다음, name 키의 값만 업데이트
  • 여러 스테이트를 다루는 경우, 리액트는 기존 state 변수를 대체하기 때문에 다른 state 변수의 손실을 막기 위해 이런 방법을 사용

import React, { useState } from "react";


function input() {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [inputs, setInputs] = useState({
        subject: "",
        score: "",
    });

    const onChange = (event) => {
        const { value, name } = event.target; //e.target : DOM
        setInputs({
            ...inputs, //inputs 객체를 복사
            [name]: value, //name 키의 값만 업데이트
        })
    }

    return (<>
        <div>
            <h2>성적: {inputs.subject}{inputs.score}</h2>
            <input name="subject" placeholder="수학" value={input.subject} onChange={onChange}></input>
            <input name="score" placeholder="99" value={input.score} onChange={onChange}></input>
        </div>
    </>
    )
}

export default input;