• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

섹션3 로그인기능 구현 - react hook form

24.02.26 10:19 작성 24.02.26 10:20 수정 조회수 130

0

안녕하세요 수강중인데요

지금까지 수강 마치고 항상 프로그램 실행이 정상적으로 돌아갓는데

이번 reac hook form 강의에서 코드 실행해보면

register 화면에서 유효성 검사 기능이 동작하질 않습니다

강의 참고하여 vs로 필요한 install 전부 설치하엿고 에러도 없엇습니다

이상해서 react hook 관련 구글링을 통해 다른 방법으로도 적용해보앗지만 여전히 동작을 안합니다

원인을 모르겟네요

 

 

import React from 'react'
import { useForm } from 'react-hook-form'
import { useDispatch } from 'react-redux'
//import { registerUser } from '../../store/thunkFunctions'

const RegisterPage = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset
  } = useForm({ mode: 'onChange' })
  //const dispatch = useDispatch();

  const onSubmit = ({ email, password, name }) => {

    

   // dispatch(registerUser(body));

    reset();
  }

  const userEmail = register("email",{
    required: {
      value : true,
      message : "필수 필드입니다."},
  });
  const userName = {
    required: "필수 필드입니다."
  }
  const userPassword = {
    required: '필수 필드입니다.',
    minLength: {
      value: 6,
      message: "최소 6자입니다."
    }
  }

  return (
    <section className='flex flex-col justify-center mt-20 max-w-[400px] m-auto'>
      <div className='p-6 bg-white rounded-md shadow-md'>
        <h1 className='text-3xl font-semibold text-center'>
          회원가입
        </h1>
        <form className='mt-6' onSubmit={handleSubmit(onSubmit)}>
          <div className='mb-2'>
            <label
              htmlFor='email'
              className='text-sm font-semibold text-gray-800'
            >Email</label>
            <input
              type='email'
              id="email"
              className='w-full px-4 py-2 mt-2 bg-white border rounded-md'
              {...register('email', userEmail)}
            />
            {
              errors?.email &&
              <div>
                <span className='text-red-500'>
                  {errors.email.message}
                </span>
              </div>
            }
          </div>

          <div className='mb-2'>
            <label
              htmlFor='name'
              className='text-sm font-semibold text-gray-800'
            >Name</label>
            <input
              type='text'
              id="name"
              className='w-full px-4 py-2 mt-2 bg-white border rounded-md'
              // {...register('name', userName)}
            />
            {/* {
              errors?.name &&
              <div>
                <span className='text-red-500'>
                  {errors.name.message}
                </span>
              </div>
            } */}
          </div>

          <div className='mb-2'>
            <label
              htmlFor='password'
              className='text-sm font-semibold text-gray-800'
            >Password</label>
            <input
              type='password'
              id="password"
              className='w-full px-4 py-2 mt-2 bg-white border rounded-md'
              {...register('password', userPassword)}
            />
            {
              errors?.password &&
              <div>
                <span className='text-red-500'>
                  {errors.password.message}
                </span>
              </div>
            }
          </div>

          <div className='mt-6'>
            <button type='submit' className='w-full px-4 py-2 text-white duration-200 bg-black rounded-md hover:bg-gray-700'>
              회원가입
            </button>
          </div>

          <p className='mt-8 text-xs font-light text-center text-gray-700'>
            아이디가 있다면?{" "}
            <a
              href='/login'
              className='font-medium hover:underline'
            >
              로그인
            </a>
          </p>
        </form>
      </div>
    </section>
  )
  
}

export default RegisterPage

답변 1

답변을 작성해보세요.

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2024.02.27

안녕하세요, 인프런 AI 인턴입니다. volcano1122님의 질문 감사합니다.

제시된 코드를 검토해본 결과, userNameregister 함수 적용 부분에 문제가 있어 보입니다. userEmailregister 함수를 이용하여 정의되었듯이, userNameuserPassword도 동일한 방식으로 register 함수와 연동할 필요가 있습니다.

userName의 필드를 다음과 같이 수정해보세요.

...
const userName = register("name", {
  required: "필수 필드입니다."
});
...

그리고 input 필드에 userName을 스프레드 연산자를 사용하여 적용해야 합니다.

<input
  type='text'
  id="name"
  className='w-full px-4 py-2 mt-2 bg-white border rounded-md'
  {...userName} // 수정된 부분
/>
{
  errors?.name &&
  <div>
    <span className='text-red-500'>
      {errors.name.message}
    </span>
  </div>
}

이렇게 수정하고 난 다음에 다시 실행해보시길 바랍니다. 오류 해결에 도움이 되었으면 좋겠습니다.

추가로 더 자세한 진행 상황이나 문제가 있으시면 인프런의 ‘문의하기’를 통해 직접 문의해 보시는 것도 좋은 방법입니다.