react로 쇼핑몰 만들기(2) - 로그인 및 회원가입

Login, Register 페이지 UI 생성하기

로그인 및 회원가입 UI 구성상 비슷함으로 같이 작업하겠습니다.

LoginPage 및 RegisterPage 폴더입니다.

기본 index.jsx이외에 signin과 signup컴포넌트 생성했습니다. 이 둘 컴포넌트는 form을 작성할 예정입니다.

LoginPage 및 RegisterPage의 .jsx파일입니다.

SignIn 및 SignUp 컴포넌트의 .jsx파일입니다.

components폴더안에 form의 jsx와 scss파일입니다.

 

React Hook Form을 이용한 유효성 체크

npm install react-hook-form

위 명령어를 통해 form hook을 설치합니다.

유효성 검사 코드 작성시 되게 지저분할 수 있습니다. react hook form을 설치함을 통해 깔끔하고 시간도 많이 절약할 수 있습니다.

react hook form공식 문서:  https://react-hook-form.com/

 

Form.jsx에서 form hook을 사용법과 ui입니다.

자세한 코드는 아래에 첨부했습니다.

import React from 'react'
import styles from './Form.module.scss'
import { useForm } from 'react-hook-form'

const Form = ({ title }) => {

  const { register, handleSubmit, formState: { errors }, reset } = useForm({
    mode: 'onChange'
  })

  const onSubmit = ({ email, password }) => {
    console.log(email, password)
  }

  const userEmail = {
    required: '필수 필드입니다.',
    pattern: {
      value: /^([A-Z|a-z|0-9](\.|_){0,1})+[A-Z|a-z|0-9]\@([A-Z|a-z|0-9])+((\.){0,1}[A-Z|a-z|0-9]){2}\.[a-z]{2,3}$/gm,
      message: '입력하신 이메일 주소가 올바르지 않습니다.'
    }
  }

  const userPassword = {
    required: '필수 필드입니다.',
    minLength: {
      value: 4,
      message: '최소 4자입니다.'
    },
    maxLength: {
      value: 13,
      message: '최대 13자입니다.'
    },
    pattern: {
      value: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/gm,
      message: '최소 8자이며, 영문 1자, 숫자 1자'
    }
  }

  return (
    <form onSubmit={handleSubmit()} className={styles.form}>
      <div>
        <input type='email' placeholder='E-mail' {...register('email', userEmail)} />
        {errors?.email &&
          <div>
            <span className={styles.form_error}>{errors.email.message}</span>
          </div>
        }
      </div>

      <div>
        <input type='password' placeholder='Password' {...register('password', userPassword)} />
        {errors?.password &&
          <div>
            <span className={styles.form_error}>{errors.password.message}</span>
          </div>
        }
      </div>

      <button type='submit'>{title}</button>
      <span className={styles.form_error}></span>
    </form>
  )
}

export default Form

onSubmit함수는 나중에 사용될 거라 일단 console.log만 찍겠습니다.

유효성 검사는 '유효성검사 정규표현식' 구글링하면 나옵니다.

useForm사용법은 공식문서를 참조하면 됩니다.

 

파이어베이스 연결하기

회원가입 및 로그인이 좀 더 쉬운 방식으로 파이어베이스를 이용하겠습니다. https://firebase.google.com/

앱을 추가 후 web을 클릭합니다.

웹을 등록한 후 npm설치등 지시를 따라서 하면 됩니다.

src폴더안에 firebase.js파일을 생성한 후 오른쪽 빨간 박스 부분을 복붙합니다. 

export default app; 도 추가해서 다른 데에서도 사용할 수 있게끔 합니다.

이메일과 비밀번호로 가입할 수 있는 권한을 설정해줍니다.

 

인증 기능 구현하기

左) SignUp.jsx파일의 코드입니다.

右) SignIn.jsx파일의 코드입니다.

Form.jsx파일의 변경된 코드입니다.

SignUp과 SignIn에서 받아온 getDataForm 및 firebaseError을 사용합니다.

reset()는 버튼 클릭 후 input창에 입력했던 내용을 지워주는 함수입니다.