[React] State 이용하여 간단한 로그인 화면 만들기

 

1. 초기 세팅

: 최상위 div 안에 id input, password input, 로그인 button을 만든다.

import React, { useState } from "react";

function App() {

  };

  return (
    <div>
      <div>
        아이디 : <input />
      </div>
      <div>
        비밀번호 :<input />
      </div>
      <button>로그인</button>
    </div>
  );
}

export default App;

 

2. id와 password에 각각 state를 만들어준다.

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

▶️ 초기값은 빈 문자열로 만들어준다. 입력을 할 것이므로.

 

3. input 태그 안에 value와 onChange 넣어주자.

<div>
    아이디 : <input type="text" value={id} onChange={onIdChangeHandler} />
</div>
<div>
    비밀번호 : <input type="password" value={password} onChange={onPasswordChangeHandler}/>
</div>

🚨 비밀번호 숨기고 싶으면, type="password"
: type을 이용하여, 아이디는 type="text", 비밀번호는 type="password"로 설정해준다.


이거 몰라서 비밀번호를 입력하면, *로 바뀌도록 코드를 또 짜야하나 고민하고 있었음... 역시 배우는게 많다..!

 

4. 각각의 eventHandler 코드를 작성해준다.

event가 발생할 때 console.log를 찍어보면, event > target > value에 값이 입력된다.

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

// password 필드가 변경될 경우
  const onPasswordChangeHandler = (event) => {
      return setPassword(event.target.value);
  };

 

5. Button에 alert을 넣어준다. = onClick event

입력받은 아이디와 비밀번호 값을 넣어주기 위해서는, 벡틱을 이용하여 문자열을 작성한다.
변수를 넣고 싶은 곳은 placeholder ${}를 이용하여, 중괄호 안에 변수명을 넣어준다.

<button
  onClick={function () {
      alert(
      `고객님이 입력하신 아이디는 ${id}이며, 비밀번호는 ${password}입니다. `
      );
  }}
>

6. 입력한 input 값을 다시 새로고침 하고 싶다면?

alert 창이 뜬 이후에, setId와 setPassword를 다시 빈 문자열로 초기화 시킨다.

  setId("");
  setPassword("");

 

전체 코드

import React, { useState } from "react";

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

  // console.log(id);
  // console.log(password);

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

  // password 필드가 변경될 경우
  const onPasswordChangeHandler = (event) => {
    return setPassword(event.target.value);
  };

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

export default App;