react-hook-form으로 회원가입 적용해보기

라이브러리를 이용한 회원가입

1. npm 설치

yarn add react-hook-form @hookform/resolvers yup

3개의 다른 라이브러리를 사용예정이다.

2. 적용 전 상태

//jsx
    <div>
      <form>
        <label htmlFor="email">이메일</label>
        <input type="email" name="email" />
        <label htmlFor="name">이름</label>
        <input type="text" name="name" />
        <label htmlFor="pw">비밀번호</label>
        <input type="text" name="pw" />
        <label htmlFor="checkPw">비밀번호 확인</label>
        <input type="text" name="checkPw" />
        <button type="submit">회원가입</button>
      </form>
    <div>

3. validation 설정준비

import * as yup from 'yup';

const SignUp = () => {

  const schema = yup.object().shape({
    email: yup.string().email().required(),
    name: yup.string().required(),
    pw: yup.string().min(7).max(10).required(),
    checkPw: yup
      .string()
      .oneOf([yup.ref('pw'), null])
      .required(),
  });

  <div>
    <form>
      <label htmlFor="email">이메일</label>
      <input type="email" name="email" />
      <label htmlFor="name">이름</label>
      <input type="text" name="name" />
      <label htmlFor="pw">비밀번호</label>
      <input type="text" name="pw" />
      <label htmlFor="checkPw">비밀번호 확인</label>
      <input type="text" name="checkPw" />
      <button type="submit">회원가입</button>
    </form>
  <div>
}

1.input태그의 name과 똑같은 이름으로 schema를 만든다.
2.각 요구조건에 맞게 설정후 마지막에는 required()를 적는다.

4. useForm에 schema적용

import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup'; //*
import { useForm } from 'react-hook-form'; //*

const SignUp = () => {

  const schema = yup.object().shape({
    email: yup.string().email().required(),
    name: yup.string().required(),
    pw: yup.string().min(7).max(10).required(),
    checkPw: yup
      .string()
      .oneOf([yup.ref('pw'), null])
      .required(),
  });
  
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });  //*

  <div>
    <form>
      <label htmlFor="email">이메일</label>
      <input type="email" name="email" />
      <label htmlFor="name">이름</label>
      <input type="text" name="name" />
      <label htmlFor="pw">비밀번호</label>
      <input type="text" name="pw" />
      <label htmlFor="checkPw">비밀번호 확인</label>
      <input type="text" name="checkPw" />
      <button type="submit">회원가입</button>
    </form>
  <div>
}

1. 필요한 register,handleSubmit,formState를 작성하고 useForm의 resolver에는 schema를 적용한다.

5. 태그에 등록하기

import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup'; 
import { useForm } from 'react-hook-form';

const SignUp = () => {

  const schema = yup.object().shape({
    email: yup.string().email().required(),
    name: yup.string().required(),
    pw: yup.string().min(7).max(10).required(),
    checkPw: yup
      .string()
      .oneOf([yup.ref('pw'), null])
      .required(),
  });
  
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });  
  
  const submitForm = (data) => {
    console.log(data);
  }; //*

  <div>
    <form onSubmit={handleSubmit(submitForm)}> //*
      <label htmlFor="email">이메일</label>
      <input type="email" {...register('email')}/>
      <label htmlFor="name">이름</label>
      <input type="text" {...register('name')}/>
      <label htmlFor="pw">비밀번호</label>
      <input type="text" {...register('pw')}/>
      <label htmlFor="checkPw">비밀번호 확인</label>
      <input type="text" {...register('checkPw')}/>
      <button type="submit">회원가입</button>
    </form>
  <div>
}

1.onSubmit시에 발생할 함수를 만들고 handleSubmit안에 적용한다.
2. input태그에 속성으로 {...register('name')}를 작성하고 register안에 name을 적는다
3.모든 validation이 맞을경우 콘솔에 data가 찍힐것이다.

6.에러처리

import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup'; 
import { useForm } from 'react-hook-form';

const SignUp = () => {

  const schema = yup.object().shape({
    email: yup.string().email().required(),
    name: yup.string().required(),
    pw: yup.string().min(7).max(10).required(),
    checkPw: yup
      .string()
      .oneOf([yup.ref('pw'), null])
      .required(),
  });
  
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });  
  
  const submitForm = (data) => {
    console.log(data);
  }; 

  <div>
    <form onSubmit={handleSubmit(submitForm)}> 
      <label htmlFor="email">이메일</label>
      <input type="email" {...register('email')}/>
	  <span>{errors.email && '이메일 형식이 맞지 않습니다.'}</span>
      <label htmlFor="name">이름</label>
      <input type="text" {...register('name')}/>
      <span>{errors.name && '이름 형식이 맞지 않습니다.'}</span>
      <label htmlFor="pw">비밀번호</label>
      <input type="text" {...register('pw')}/>
      <span>{errors.pw && '비밀번호 형식이 맞지 않습니다.'}</span>
      <label htmlFor="checkPw">비밀번호 확인</label>
      <input type="text" {...register('checkPw')}/>
      <span>{errors.checkPw && '비밀번호가 맞지 않습니다.'}</span>
      <button type="submit">회원가입</button>
    </form>
  <div>
}

errors가 있을경우 onSubmit시에 에러처리한 글자가 나올것이다.