트위터 클론코딩 3 - 로그인 연동 1

이번에는 비로그인시 보여지는 로그인 창을 만들어 줄건데 

 

우선 그전에 firebase에 가서 왼쪽 Authentication 메뉴바 클릭후 로그인 승인 설정을 해주자

나는 이메일/비밀번호랑 google 란만 설정 해줬다.

 

 

그리고 나서 Auth.js로 가서 코드 작성을 해주자

 

import React, { useState } from "react";
 
function Auth() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
 
  const onChange = (e) => {
    const { value, name } = e.target;
    if (name === "email") setEmail(value);
    else if (name === "password") setPassword(value);
  };
  const onSubmit = (e) => {
    e.preventDefault();
 
  };
  return (
    <form onSubmit={onSubmit}>
      <input
        type="text"
        placeholder="email"
        name="email"
        value={email}
        onChange={onChange}
      />
      <input
        type="password"
        placeholder="email"
        name="password"
        value={password}
        onChange={onChange}
      />
      <input type="submit" value="Log in" onSubmit={onSubmit} />
    </form>
  );
}
 
export default Auth;

 

email이랑 password를 담아줄 state를 만들고 onChange 함수를 만들어서 target의 name,value props를 가져온다.

그래서 name 값이 email이면 setEmail( )에 email value를 넣어주고 name 값이 password면 setPassword( ) 에 password value를 넣어준다.

 

그리고 onSubmit 함수에 e.preventDefault( ) 함수를 호출 해주었는데 이유는 submit 태그는 기본적으로 페이지를 새로고침 해주기 때문에 그 동작을 하지 말라고 넣어준거다.