input 안 속성으로 ref와 useform이 존재하는 경우 ref가 작동이 안됩니다. 왜 그런건지 아시나요?

Question

문제가 되는 코드 일부분을 발췌했습니다.아래와 같이 input 태그의 ref={refInput} 가 {...register("userId",{ required:true })} 보다 위에 정의되어 있으면 포커스가 input 창에 맞춰지지 않습니다. 콘솔을 찍어봐도 undefined 가 뜹니다.const { register, handleSubmit, formState: { errors } } = useForm(); const refInput = useRef(); useEffect(()=>{ refInput.current.focus(); },[]) return()반면에 {...register("userId",{ required:true })} 보다 ref={refInput} 이 밑에 존재하면 브라우저 로드시 정상적으로 포커스가 input 창에 맞춰지더군요const { register, handleSubmit, formState: { errors } } = useForm(); const refInput = useRef(); useEffect(()=>{ refInput.current.focus(); },[]) return()라이프싸이클 때문이라 짐작은 해보지만 자세히 알수가 없어 질문 드립니다.리액트 라이프싸이클은 클래스 기반 라이프 싸이클이다보니 봐도 hook에 적용을 못하겠고, 때문에 hook 라이프 싸이클을 찾아봐도 useEffect가 componentDidMout, componentDidUpdate를 수행해 준다는 식으로 밖에 이해를 못했습니다.hook 자체가 클래스 기반으로 만들어진거면 useEffect 처럼 해당 hook을 불러올때 수행되는 라이프싸이클이 있을거 같은데 다른 hook들은 정보가 안나오네요...

코린이듈리 · Accepted Answer

이런경우는 처음봐서 신기하네요 혹시 useForm 훅도 볼 수 있을까요?

input 안 속성으로 ref와 useform이 존재하는 경우 ref가 작동이 안됩니다. 왜 그런건지 아시나요?

1개의 답변

#hook 목록