React_input 폼

import { useState } from "react"

export default function App(){

  /* *****수정된 부분***** */

  const [inputs, setInputs] = useState({userid: "", passwd: ""});           //userid와 passwd 초기값은 공백(JSON)

  function handleSubmit(event){                                             //페이지 이동 방지

    event.preventDefault();

    console.log(inputs);        

    console.log(inputs.userid);

    console.log(inputs.passwd);

  }

  /* *****수정된 부분***** */

  function handleChange(event){                                             //data의 값을 JSON에 저장

    console.log(inputs);                                                    //가장 최신값 직전(배치 문제)

    setInputs({...inputs, [event.target.name]:event.target.value})          //최신값 복제 + 업데이트된 부분 병합

                                                                            //JSON과 form의 name을 동일하게 함으로써 userid: value || passwd: value의 효과

  }

  console.log("App: ", inputs.userid);

  console.log("App: ", inputs.passwd);

  return (

    <div>

      <h1>input 태그</h1>

        <form onSubmit={handleSubmit} action = "target.html">

          {/* *****수정된 부분(value={inputs.userid})***** */}

          아이디:

          <input type="text" name="userid" value={inputs.userid} onChange={handleChange}></input>   {/* 바뀌면 userid에 저장 */}

         

          {/* *****수정된 부분(비밀번호 추가)***** */}

          비밀번호:

          <input type="text" name="passwd" value={inputs.passwd} onChange={handleChange}></input>   {/* 바뀌면 passwd에 저장 */}

          <input type="submit" value="로그인"></input>

        </form>

    </div>

  )

}