[React] State 실습

import React, { useState } from "react";

function App() {
  // State 를 쓰는 목적
  // UI 를 바꾸기 위해서
  const [id, setId] = useState("");
  const [password, setPassword] = useState("");
  const login = () => {
    alert(`고객님이 입력하신 아이디는 ${id}이며 비밀번호는 ${password}입니다.`);
    setId(""); // 입력 값 초기화
    setPassword("");
  };
  return (
    <form>
      아이디 :{" "}
      <input
        type="text"
        value={id}
        onChange={function (e) {
          setId(e.target.value);
        }}
      />
      <br />
      비밀번호 :{" "}
      <input
        type="password"
        value={password}
        onChange={function (e) {
          setPassword(e.target.value);
        }}
      />
      <br />
      <button onClick={login}>로그인</button>
    </form>
  );
}

export default App;

이후 로그인 버튼을 누르면

alert 창이 뜨고 아이디와 비밀번호가 초기화 된다.