의류 쇼핑몰 18 | Sign Up 1 | 이메일 sign-up-form 만들기

 Email provider 추가 

Firebase Authentication에 가서 Email provider를 추가한다.

 

Email/Password 를 Enable로 체크해준다.

 

 

---

 

 sign-up-form 만들기 

sign-up-form 폴더와 파일을 만들어 준다.

components 폴더 안에 sign-up-form 폴더와 파일을 만든다. 

 

 

다음과 같이 sign-up-form.jsx에서 보일러 플레이트를 만든다. 

 

 

이 sign-up-form을 sign-in에서 import하여

같은 페이지에서 보이도록 한다. 

 

 

sign-in 과 sign-up이 같은 페이지에 있다.

 

 

이제는 sign-up 내용을 채운다.

form 태그를 써서 4개의 input을 받을 것이다. 

required는 빈 칸으로 남겨 놓으면 안되고 꼭 내용을 채워야 한다

 

 

 

버튼을 만들고 input field도 채워준다.

 

 

입력 칸이 만들어졌다.

 

 

이 Input에 들어오는 내용을 useState에 담아주자. 

FormFields의 default 값을 설정해 준다. 

defaultFormFields를 그룹으로 묶었다. 

 

 

각각 따로 내용이 바뀌기 때문에 하나씩 분리해 준다. 

그래서 formFields를 destructuring 한다. 

 

 

input에 내용이 입력되었을 때 onChange로 내용을 입력 받는다. 

input 4개 모두 handleChagne 함수를 호출한다.

각각 name을 달리해줘서 어떤 input에서 들어온 것인지 분리해준다. 

 

 

 

handleChange로 useState 함수를 호출해 

입력 받은 내용을 담는다. 

 

여기서 입력한 내용을 담는 value를 각 input에 넣어준다.

value를 넣어줘야 해당 name에 내용이 들어감 

 

(??)  왜 input에 value를 넣는지 잘 이해안됨...

 

 

 

이제는 setFormField 함수를 이용해서 입력 받은 내용을 formFields에 저장한다. 

기존 formFields를 spread operator로 적어주고, 

[name]:value로 새로 입력된 내용을 업데이트 한다. 

name에 [ ] 들어가는 이유는? (computed property 문서로 확인)

 

spead operator에서 같은 key로 다른 value가 있는 경우 뒤에 있는 value가 나온다.

(spead operater 문서)

 

let obj1 = { foo: 'cat', x: 42 };
let obj2 = { foo: 'baz', y: 13 };

let clonedObj = { ...obj1 };
// Object { foo: "cat", x: 42 }

let mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

 

---

 

최종 코드 

import { useState } from 'react';

const defaultFormFields = {

displayName: '',

email: '',

password: '',

confirmPassword: ''

}

const SignUpForm = () => {

const [formFields, setFormFields] = useState(defaultFormFields);

const { displayName, email, password, confirmPassword } = formFields;

console.log(formFields);

const handleChange = (event) => {

const { name, value } = event.target;

setFormFields({ ...formFields, [name]: value })

}

return (

<div>

<h1>Sign up with your email and password</h1>

<form onSubmit={() => { }}>

<label>Display Name </label>

<input type="text" required onChange={handleChange} name="displayName" value={displayName} />

<br />

<label>Email </label>

<input type="email" required onChange={handleChange} name="email" value={email} />

<br />

<label>Password </label>

<input type="password" required onChange={handleChange} name="password" value={password} />

<br />

<label>Confirm Password </label>

<input type="password" required onChange={handleChange} name="confirmPassword" value={confirmPassword} />

<br />

<button type="submit">Sign Up</button>

</form>

</div>

)

};

export default SignUpForm;

 

 

 

sign-in component에 연결 

import {

signInWithGooglePopup,

createUserDocumentFromAuth

} from '../../utils/firebase/firebase.utils';

import SignUpForm from '../../components/sign-up-form/sign-up-form'

const SignIn = () => {

const logGoogleUser = async () => {

const { user } = await signInWithGooglePopup();

const userDocRef = await createUserDocumentFromAuth(user)

}

return (

<div>

<h1>Sign In Page</h1>

<button onClick={logGoogleUser}>Sign in with Google Popup</button>

<SignUpForm />

</div>

);

};

export default SignIn;

 

 

 

 

 

이제는 입력된 formFields를 이용해서 authentication을 해보자.