Login Form 만들기

📍 Auth.js

const Auth = () => (
  <div>
    <h1>로그인 페이지</h1>
    <p>로고 넣기</p>
    <form>
      <input type="email" placeholder="Email" required></input>
      <input type="password" placeholder="Password" required></input>
      <input type="submit" value="Login" />
    </form>
    <div>
      <button>Continue with Google</button>
      <button>Continue with GitHub</button>
    </div>
  </div>
);

export default Auth;

기본적으로 일단 이렇게 작성해 보자.
현재 local로 진행하고 있는데, 아까 입력한 GitHub의 OAuth App의 콜백 url은 로컬이 아니다.
그래서 GitHub으로 로그인하는데 문제가 있을 거란 것을 인지하고 넘어가자. ^3^

반응하는 Login Form 만들기

useState()를 사용하여 input과 form에 state를 적용하자.

❗️ 여기서 잠깐! 화살표 함수 return 쓰는 여부 확인하고 넘어가자.

//return 안써도 됌
const 변수명 = () = > ();
//
//return 써야 함
const 변수명 = () = > {
  return();
};

import { useState } from "react";

const Auth = () => {
  //이메일과 패스워드 둘다 useState()를 사용하여 state값을 사용하자.
  //디폴트 값은 ""으로 입력하자.
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  //email, password에 사용하는 이벤트
  const onChange = (event) => {
    console.log(event.target.name);
  };
  //form에 사용하는 이벤트
  const onSubmit = (event) => {
    event.preventDefault();
  };
  return (
    <div>
      <h1>로그인 페이지</h1>
      <p>로고 넣기</p>
      {/*form에 onSubmit 이벤트를 넣어준다*/}
      <form onSubmit={onSubmit}>
        <input
          type="email"
          placeholder="Email"
          required
          {/*value에 state값을 넣어준다.
          name을 작성하여 event.target.name이 어떻게 콘솔에 찍히는지 확인해보자.
          onChange 이벤트를 넣어준다*/}
          value={email}
          name="email"
          onChange={onChange}
        ></input>
        <input
          type="password"
          placeholder="Password"
          required
          {/*value에 state값을 넣어준다.
          name을 작성하여 event.target.name이 어떻게 콘솔에 찍히는지 확인해보자.
          onChange 이벤트를 넣어준다*/}
          value={password}
          name="password"
          onChange={onChange}
        ></input>
        <input type="submit" value="Login" />
      </form>
      <div>
        <button>Continue with Google</button>
        <button>Continue with GitHub</button>
      </div>
    </div>
  );
};

export default Auth;

• 이벤트 타겟 네임이 잘 받아온다.
  이렇게 하는 이유는 이메일/패스워드 입력할 때 반복되는 코드 작성하지 않고 동일한 이벤트 사용하기 위해서이다.
  

Way 1.
이렇게 말이다. if/else if 조건문을 사용하여 간단하게 form을 컨트롤 해보자.
name이 "email"이면 setEmail()로 value보내서 email state를 업데이트하고, name이 "password"이면 setPassword()로 value보내서 password state를 업데이트하면 된다.

const onChange = (event) => {
    const {
      target: { name, value },
    } = event;
    if (name === "email") {
      setEmail(value);
    } else if (name === "password") {
      setPassword(value);
    }
  };

Way 2.
이렇게 하는 방법도 있다는 고수의 댓글...!
아에 form state안에 이메일, 패스워드 값을 업데이트 하게 하는 그런...ㅇ.ㅇ!!

  const [form, setForm] = useState({ email: "", password: "" });
  const onChange = ({ target: { name, value } }) =>
    setForm({ ...form, [name]: value });

Way 3.
if else if로 다중 조건문 쓰는 대신 이렇게 간단하게 표현할 수도 있다.
코딩의 세계는 무궁무진하구만...^.^!

onChange={e => setEmail(e.target.value)}
onChange={e => setPassword(e.target.value)}

🔥 가장 보편적인 Way.1으로 가는 걸로 ..^^!

반응하는 Login Form 로직

import { useState } from "react";

const Auth = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  //email, password에 사용하는 이벤트
  const onChange = (event) => {
    const {
      target: { name, value },
    } = event;
    if (name === "email") {
      setEmail(value);
    } else if (name === "password") {
      setPassword(value);
    }
  };
  //form에 사용하는 이벤트
  const onSubmit = (event) => {
    event.preventDefault();
  };
  return (
    <div>
      <h1>로그인 페이지</h1>
      <p>로고 넣기</p>
      <form onSubmit={onSubmit}>
        <input
          type="email"
          placeholder="Email"
          required
          value={email}
          name="email"
          onChange={onChange}
        ></input>
        <input
          type="password"
          placeholder="Password"
          required
          value={password}
          name="password"
          onChange={onChange}
        ></input>
        <input type="submit" value="Login" />
      </form>
      <div>
        <button>Continue with Google</button>
        <button>Continue with GitHub</button>
      </div>
    </div>
  );
};

export default Auth;

로직

1. input(이메일 인풋/비번 인풋)을 변경할 때 마다, onChange 이벤트를 호출한다.

2. onChange 이벤트는 onChange 펑션을 호출한다.

3. onChange 펑션을 호출 input에 입력한 값(event.target.value)을 토대로 다음과 같은 항목이 실행된다.

• name이 email과 같을 경우
  setEmail()과 입력한 event.target.value값을 이용하여 email state를 업데이트 한다. 그러면 이메일 input은 이메일 state에 있는 value 값을 받아온다.
• name이 password와 같을 경우
  setPassword()와 입력한 event.target.value값을 이용하여 password state를 업데이트 한다. 그러면 패스워드 input은 패스워드 state에 있는 value 값을 받아온다.

4. 따라서 input이 바뀌는 모든 순간마다 state도 바뀌는 거다.
   콘솔로그 찍어보면 키보드 입력할 때 마다(한글자 한글자 마다/ onChange 이벤트 사용하기 때문에) value 값 바뀌는 거 확인할 수 있다.