react-hook-form, React.forwardRef() 에러

 

회원가입 폼을 react-hook-form을 이용하여 개발하던 도중 만난 에러

 

일전에 validation을 직접 useState로 상태 관리를 하며 개발한 적이 있었는데 코드도 너무 길어지고 복잡해 보여서 간편한게 없나 찾다 리액트 훅 폼을 발견하고 적용해봤지만 적용이 되지 않았다...

정확히는 register를 사용하려했는데 register로 전달된 data값이 콘솔에 찍히지 않았다 ㅜ

const Input = ({ id, type, ...props }: InputProps) => {
  return <StyledInput id={id} type={type} {...register}></StyledInput>;
};

내가 작성했던 Input 컴포넌트. 

 

알고보니 register에는 onChange, onBlur, ref, name 을 props로 전달하고 있었는데

일반적인 사용법처럼 props로 register을 전달해주면 ref 또한 props로 전달하게 되어서 오류가 발생한다.

 

이유인즉슨,

부모 컴포넌트 내에서 자식 컴포넌트 태그에 있는 ref를 사용하려 했기 때문이다.

이를 부모 요소인 joinForm컴포넌트에서 조작하고 싶었기 때문에 forwardRef()를 사용해서 ref를 전달해 주어야 한다.

 

 

const Input = forwardRef(({ id, type, ...props }: InputProps) => {
  return <StyledInput id={id} type={type} {...props.register}></StyledInput>;
});

인풋 컴포넌트를 forwardRef()로 감싸준 뒤,

<InputBox
  register={register('password')}
  htmlFor='password'
  type='password'
/>
{errors?.password?.type === 'required' && (<p>비밀번호필수입력사항입니다.</p>)}

사용하고자 하는 부모 컴포넌트에 register을 props 자체로 던져서 사용한다.

 

 

짠! 잘 나온다!

 

 

결론은 상위 컴포넌트에서 하위 컴포넌트의 ref를 사용하고 싶을 때 하위 컴포넌트에 forwardRef를 사용해 ref를 상위 컴포넌트에게 전달해 줄 수 있다!