[Next] 대충프로젝트(4) - useRef없이 input창에 포커스 주기

ver1부터 계속 고민했던 오류인데 ver2만들면서 제ㅐㄷ로 해결이 됐다

 

하고자 하는 것은 추가하기 버튼을 눌렀을 때 새 form태그가 생기면 안에 있는 input에 자동 포커스를 주고자 하였다

 

기존 코드

const addRef = useRef(null)
const [addState, setAddState] = useState(false)

const onClickAdd = () => {
    setAddState(prev=>!prev)
    setTimeout(() => {
        addRef.current.focus()
    }, 100);

}
...
return (
	{addState ?
    <div className='px-6 py-3 sm:py-6 border-b bg-bgColor cursor-pointer h-[152px]'>  
            <form onSubmit={handleSubmit(onValidAdd)} className='flex justify-between pb-5'>
                    <input ref={addRef}  {...register("title")}className='font-bold w-3/4 focus:outline-none border'/>
            </form>
            <div className='overflow-hidden whitespace-normal text-ellipsis break-keep  content'>

            </div>
        </div>   :null}
        )

원래는 위와 같은 방식으로 add버튼을 눌렀을 때 새div가 생겨나고 그 안 input태그에 focus를 주는 방식을 사용하려고 했는데 자꾸 다음과 같은 오류가 발생했다.

왜 자꾸 addRef가 null값이 되는지에 대해 챗지피티에게 물어본 결과 다음과 같은 답변을 받아냈다

 

ref가 필요 없었다!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

 

허허 좀 어이가 없었다 항상 input을 다룰 때는 react-hook-form을 사용해와서

ref 쓸 때마다 같은 오류가 나는게 화났는데 이유를 알고나니까 속이 다 시원하다

 

아무튼 아래와 같이 고치면 input이 생성될 때 자동포커싱이 된다

<form onSubmit={handleSubmit(onValidAdd)} className='flex justify-between pb-5'>
        <input autoFocus  {...register("title")} className='font-bold w-3/4 focus:outline-none border'/>
</form>