10. twitter clone 하기 - 파이어베이스 로그인 설정(2)

1. 로그인 폼 기본 구조 만들기

• 파이어베이스 설정으로 로그인 할 수 있는 서버가 준비되었습니다.
• routes 폴더에 Auth.js 파일에 로그인 폼을 만듭니다.

// ./src/routes/Auth.js
const Auuth = () => {
  return <div>
    <form>
      <input type="email" placeholder="Email" required />
      <input type="password" placeholder="Password" required />
      <input type="submit" value="Log In" />
    </form>
    <div>
      <button>Continue with Google</button>
      <button>Continue with Github</button>
    </div>
  </div>
}

export default Auth

• 코드 작성 후 화면을 확인해보면 <Continue with Google> 과 <Continue with Github> 버튼이 만들어집니다.

• 위에 버튼 두 개는 구글, 깃허브 소셜 로그인을 담당하고 구글, 깃허브 소셜 로그인은 파이어베이스 서버에 요청만 하면 되므로 서버 호출을 할 수 있게 버튼을 만듭니다.
• 이메일, 비밀번호 로그인의 경우 이메일과 비밀번호를 입력 받아야 하므로 form 엘리먼트와 input 엘리먼트를 사용합니다.
• 폼 데이터가 서버로 제출되기 전에 이메일과 비밀번호는 반드시 채워져 있어야 하므로 <input> 태그의 required 속성을 입력합니다.
  => required 속성은 boolean 속성입니다. 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다.

2. 로그인 폼이 상태를 업데이트하도록 만들기

• 리액트에서 input 엘리먼트를 관라하고 form 엘리먼트가 실행되도록 만드려면 useState 함수로 상태를 만들어 주고 handleLogInInput, handleLogInSubmit 함수로 이벤트를 연결합니다.

// ./src/routes/Auth.js
import { useState } from "react"

const Auth = () => {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  
  const handleLongInInput = e => {
    console.log(e.target.name)
  }
  const handleLogInSubmit = e => {    // e = event
    e.preventDefault()
  }
  
  return <div>
    <form onSubmit={handleLogInSubmit}>
      <input name="email" type="email" placeholder="Email" required value={email} onChange{handleLongInInput} />
      <input name="password" type"password" placeholder="Password" required value={password} onChange={handleLongInInput} />
      <input type="submit" value="Log In" />
    </form>
    <div>
      <button>Continue with Google</button>
      <button>Continue with Github</button>
    </div>
  </div>
}

export default Auth

• handleLogInInput 함수에서 e.target.name을 출력하게 되어 있습니다.
• 각각의 input 엘리먼트를 마우스로 눌러 키보드 입력을 시도 하면 로그인 폼 자체에 텍스트가 입력되지 않고 input 엘리먼트의 name 속성에 지정한 값이 콘솔에 출력됩니다.
  => handleLogInInput 함수에서 e.target.name으로 어떤 input 엘리먼트에서 입력을 시도하고 있는지 구분할수 있습니다.

• input 엘리먼트에서 email 입력과 password 입력을 구분하기 위해 2가지 함수를 만드는 것보다 e.target.name 으로 input 엘리먼트를 구분하는 방법이 더 효율적입니다.
• form 엘리먼트는 input 엘리먼트 안에 내용을 모두 작성하고 Enter 나 <전송>을 누룰시 submit 이벤트가 발생하면 페이지가 새로고침이 됩니다. 이것 때문에 리액트의 상태가 초기화 되는 현상이 발생합니다.
  => 이 현상을 막기 위해 onSubmit 함수에서 이벤트의 기본값을 막는 e.preventDefault()를 사용합니다. 이렇게 하면 submit 이벤트가 발생했을 때 hadleLogInSubmit 함수에서 submit 이벤트를 가로채고 이벤트의 기본값을 e.preventDefault()가 막아서 새로고침이 발생하지 않습니다.
• 아래와 같이 코드를 수정합니다.

// ./src/routes/Auth.js
inport { useState } from "react"

const Auth = () => {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  
  const handleLogInInput = e => {
    const {target: { name, value }} = e
    if (name === "email") {
      setEmail(value)
    } else if (name === "password") {
      setPassword(value)
    }
  }
(... 생략 ...)

• e.target(=event.target) 에서 가져올 수 있는 값에는 여러가지가 있는데 여기서 필요한 값은 name 과 value 입니다.
• 이를 구조 분해 할당하고 if문과 else if 문으로 name 을 구별해서 각각에 대한 입력값을 setEmail 함수와 setPassword 함수로 상태를 업데이트 합니다.

3. 이메일, 비밀번호 인증 기능사용하기

• 회원가입 기능을 구현하는데 여기서는 파이어베이스로 회원가입을 처리합니다.
• 파이어베이스는 이메일, 비밀번호로 회원가입, 인증을 처리하는 함수를 제공하고 사용방법이 간단합니다.
• 로그인, 회원가입을 위한 form 엘리먼트의 onSubmit  함수는 2개일 필요가 없고 1개만 필요합니다.
• 아래와 같이 코드를 수정합니다.

// ./src/routes/Auth.js
import { useState } from "react"

const Auth = () => {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [newAccount, setNewAccount] = useState(true)
  
  const handleLogINInput = e => {
    const {target: { name, value }} = e
    if(name === "email") {
      setEmail(value)
    } else if(name === "password"){
      setPassword(value)
    }
  }
  const handleLogInSubmit = e => {
    e.preventDefault()
    if(newAccount){
      // create newAccout
    } else {
      // log in
    }
  }
  return <div>
    <form onSubmit={handleLogInSubit}>
      <input name="email" type="email" placeholder="Email" required 
        value={email} onChange={handleLogInInput}
      />
      <input name="password" type="password" placeholder="Password" required 
        value={password} onChange={handleLogInInput}
      />
      <input type="submit" value={newAccount ? "Create Accout"} : "Log In" />
    </form>
    <div>
      <button>Continue with Google</button>
      <button>Continue with Github</button>
    </div>
  </div>
}

export default Auth

• newAccount를 useState 함수로 정의합니다. newAccout의 true, false에 따라 handleLogInSubmit 함수에서 회원가입과 로그인할 수 있도록 코드를 분기합니다. 이러한 방식으로 하면 깔끔하게 회원가입과 로그인 기능을 만들 수 있습니다.
• 버튼 역활을 할 input 엘리먼트의 문구도 newAccount 에 따라 다르게 적용합니다.
  => newAccount 의 true, false 에 따라 회원가입 또는 로그인 기능을 할 수 있도록 코드를 작성한 것입니다.

이 글은 Nomad Coder의 "클론코딩 트위터" 책을 바탕으로 작성되었습니다.