로그인 비밀번호 input 구현

• input으로 아이디, 비밀번호를 받아 와라
• alert로 "고객님이 입력하신 아이디는 '입력아이디' 이며, 비밀번호는 '입력비밀본호'입니다.
  
  
  
  
• id, pq필드는 state로 관리. 변경이 일어날 때마다 setState를 해서 동기화 시켜라
• alert를 띄운 후 아이디와 비밀번호 영역을 초기화
• 비밀번호는 입력값 그대로 보이면 안됨
  
  
  
  

import React from 'react'
import { useState } from "react"

function App() {
  const [id, setId] = useState("")
  const [pw, setPw] = useState("")

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

  //pw 필드가 변결될 경우
  const onPwchangeHandler = (event) => {
    setPw(event.target.value)
  }

  return (
    <div>
      아이디 : <input type='text' value={id} onChange={onIdchangeHandler} />
      <br />
      비밀번호 : <input type='password' value={pw} onChange={onPwchangeHandler} />
      <br />
      <button
        onClick={() => {
          alert(`고객님이 입력하신 아이디는 ${id}이며, 비밀번호는 ${pw} 입니다.`)
          setId('')
          setPw('')
        }}>
        로그인
      </button>
    </div>
  )
}

export default App