프로젝트
트위터 클론코딩 3 - 로그인 연동 1
규몽
2020. 11. 24. 23:28
이번에는 비로그인시 보여지는 로그인 창을 만들어 줄건데
우선 그전에 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 태그는 기본적으로 페이지를 새로고침 해주기 때문에 그 동작을 하지 말라고 넣어준거다.