React-hook-form 하위(자식) 컴포넌트 데이터 처리

Form 안에 하위컴포넌트의 input 데이터까지 처리 (+ yup 유효성 검사) with TypeScript

상위 Form

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

import EmailInput from './EmailInput'; // 하위 컴포넌트

const schema = yup.object().shape({
  loginId: yup.string().required('아이디를 입력하세요.'),
  password: yup.string().required('비밀번호를 입력하세요.'),
  passwordConfirm: yup
    .string()
    .oneOf([yup.ref('password')], '비밀번호가 다릅니다.')
    .required('비밀번호를 확인해주세요.'),
  name: yup.string().required('이름을 입력하세요.'),
  phone: yup.string().required('휴대폰 번호를 입력하세요.'),
  email: yup.string().required('이메일을 입력하세요.'),
});

const SingUpForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormProps>({ resolver: yupResolver(schema) });
  
  // #########################################################
  // RegisterForm의 Type(FormProps)과 yup 스키마가 일치해야 한다.
  // #########################################################

  const onSubmit = (data: FormProps) => {
    console.log(data);
  };

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <input label="아이디" {...register('loginId')} />
          {errors.loginId && <span>{errors.loginId.message}</span>}
        </div>
        <div>
          <input label="비밀번호" {...register('password')} />
          {errors.password && <span>{errors.password.message}</span>}
        </div>
        <div>
          <input label="비밀번호 확인" {...register('passwordConfirm')} />
          {errors.passwordConfirm && <span>{errors.passwordConfirm.message}</span>}
        </div>
        <div>
          <input label="이름" {...register('name')} />
          {errors.name && <span>{errors.name.message}</span>}
        </div>
        <div>
          <input label="휴대폰 번호" {...register('phone')} />
          {errors.phone && <span>{errors.phone.message}</span>}
        </div>
        <div>
          <EmailInput register={register} errors={errors} />
          {errors.email && <span>{errors.email.message}</span>}
           
           // ##########################################
           // 하위 컴포넌트에 register와 errors를 넘겨준다.
           // ##########################################
           
        </div>
        <button type="submit">회원가입</button>
      </form>
    </div>
  );
};

하위 Input

import { UseFormRegister, FieldErrors } from 'react-hook-form';

// #######################
// register와 errors의 타입
// #######################

interface Props {
  register: UseFormRegister<any>;
  errors: FieldErrors;
}

const EmailInput = ({ register, errors }: Props) => {

  return (
    <div>
      <input
        type="email"
        {...register('email')}
        crossOrigin="anonymous"
      />
    </div>
  );
};

export default EmailInput;

https://react-hook-form.com/