[React] useState 이용해서 회원가입 구현하기

useState를 이용해서 간단한 회원가입 기능을 구현해보려고 한다.

• 회원가입 form에서 필요한 정보는
  아이디, 이름, 이메일, 인증번호, 비밀번호, 비밀번호 재확인 이다.
• 각 항목마다 validation이 필요하다.

useState란?
React 함수 컴포넌트에서 state를 사용할 수 있게 하는 Hook

1. 회원가입 form 만들기

const [form, setForm] = useState({
    userId: '',
    name: '',
    email: '',
    certification: '',
    password: '',
    confirmPassword: '',
  })

회원가입에서 필요한 항목들을 useState를 이용하여 설정해주었다.

  const onChange = e => {
    const nextForm = {
      ...form,
      [e.target.name]: e.target.value,
    }
    setForm(nextForm)
  }
  ...
    // 아이디 입력 input
    <TextField
      type="text"
      name="userId"
      onChange={e => {
        onChange(e)
        idValidation(e)
      }}
      value={userId}
     />

사용자가 회원가입을 입력하면 setForm을 이용하여 위와 같은 식으로 state값을 변경해주었다.

2. validation 설정하기
각 항목마다 validation이 필요했고, id같은 경우에는 중복된 id가 없도록 설정해야했다.

  // validation 저장
  const [valid, setValid] = useState({
    validId: true,
    validName: true,
    validEmail: true,
    validCertification: true,
    validPassword: true,
    validConfirmPassword: true,
  })
  
  // validation 설정
  const checkValid = ({ category, status }) => {
    const validation = {
      ...valid,
      [category]: status,
    }
    setValid(validation)
  }
  
  // 아이디 validation
  const idValidation = e => {
    if (form.userId.trim().length > 0) {
      if (timer) {
        clearTimeout(timer)
      }
      const newTimer = setTimeout(async () => {
        try {
          await axios
            .get(
              `id 중복 요청 url`,
            )
            .then(res => {
              if (res.data === true) {
                return checkValid({ category: 'validId', status: false })
              }
              return checkValid({ category: 'validId', status: true })
            })
        } catch {
          alert('에러가 발생했습니다')
        }
      }, 500)
      setTimer(newTimer)
    }
  }

• 아이디를 입력하는 동시에 중복 확인 필요
• setTimeout을 이용하여 약간의 텀을 두고 중복 확인 요청을 주기적으로 보냄
• 모든 항목 validation 통과 -> 회원가입 버튼 활성화
  그래서 useState를 이용해서 validation을 따로 저장해주었다.

간단한 회원가입 기능이지만, useState vs useRef 이 글을 보고 정리해보았다. 댓글처럼 react-hook-form라이브러리를 사용했으면 좋았을 것 같다.