리엑트 - 아이디 비밀번호 usestate 사용해서 만들어보기

완성 전체코드

// src/App.js

import React from "react";
import { useState } from "react";
import { flushSync } from "react-dom";

function App() {

  const [id, setId] = useState("")
  const [password, setPassword] = useState("")

  // id 필드가 변경되었을대 호출되는 함수
  const onChangeIdHandler = (event) => {
    setId(event.target.value)
  }

  // password 필드가 변경되었을때 호출되는 함수
  const onchangePasswordHandler = (event) => {
    setPassword(event.target.value)
  }

  // 아이디랑 비밀번호가 잘 변경되는지 확인
  console.log('id : ',id)
  console.log('pw : ',password)



  return(
    <div>
      <br />
      <div>
        아이디 : <input type='id' value ={id} onChange={onChangeIdHandler} />
      </div>
      <br />

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

      </div>

    </div>
  )
}

export default App;

함수 미리 만들어놓기

const [id, setId] = useState("")
  const [password, setPassword] = useState("")

  // id 필드가 변경되었을대 호출되는 함수
  const onChangeIdHandler = (event) => {
    setId(event.target.value)
  }

  // password 필드가 변경되었을때 호출되는 함수
  const onchangePasswordHandler = (event) => {
    setPassword(event.target.value)
  }

  // 아이디랑 비밀번호가 잘 변경되는지 확인
  console.log('id : ',id)
  console.log('pw : ',password)


  const loginClick = () => {
    alert(`고객님이 입력하신 아이디는 ${id} 비밀번호는 ${password} 입니다.`)
    setId("")
    setPassword("")
  }

return 을 기준으로 위쪽에 미리 사용할 함수들을 만들어놓습니다

useState 를 사용할것이기 때문에 id 와 password는 useState 를 사용해서 미리 만들고,

값을 입력할때마다 setState를 사용해서 입력되어 변경된 값으로 각 변수에 할당된 값을 새롭게 초기화 해줍니다.

그리고 일반적으로 자주쓰이는 로그인 버튼을 클릭시 입력해놓은 아이디와 비밀번호가 초기화되는 기능도 넣기 위해서

버튼을 클릭함과 동시에 setState 로 초기화까지 시켜준다.

  return(
    <div>
      <br />
      <div>
        아이디 : <input type='id' value ={id} onChange={onChangeIdHandler} />
      </div>
      <br />

      <div>
        비밀번호 : <input type="password" value = {password} onChange={onchangePasswordHandler}/>
      </div>
      <br />
      <div>
      <button onClick={loginClick}> 로그인 </button>

      </div>

    </div>
  )

그리고 위에서 만들어놓은 로직을 해당하는 태그들에 잘 삽입해주면 완성이다