React_ State를 활용한 아이디/패스워드 입력창 만들기

import React, { useState } from "react";

function App() {
const [id, setId] = useState("");
const [password, setPassword] = useState("");

console.log("id", id);

//Id필드가 변경될 경우
const onIdChangeHandler = (event) => {
setId(event.target.value);
};

// 비밀번호가 변경될 경우
const onPwChangeHandler = (event) => {
setPassword(event.target.value);
};

return (

<div>
  <div>
    아이디 : <input type="text" value={id} onChange={onIdChangeHandler} />
  </div>
  <div>
    비밀번호 :{" "}
    <input type="password" value={password} onChange={onPwChangeHandler} />
  </div>
  <button
    onClick={() => {
      alert(
        `고객님이 입력하신 아이디는 ${id}이며, 비밀번호는 ${password} 입니다.`
      );
      setId("");
      setPassword("");
    }}
  >
    로그인
  </button>
</div>

);
}

export default App;