[Ez to Play / Error Note] React Hook Form 사용중 xxx.current에서 타입에러

Type 'string' is not assignable to type 'HTMLInputElement'

 

 

typescript와 react hoor form을 사용하는데 비밀번호 현재값을 input_password.current에 담으려 하자 아래와 같은 타입에러를 만났다.

 

상황: 비밀번호 확인(재입력)란에서 현재 입력된 비밀번호와 재입력된 비밀번호가 같은지 확인하기 위해 현재 입력된 비밀번호를 useRef 함수가 담긴 변수 input_password의 .current에 담음.

 

 

useRef에 타입을 지정해줬어야 했는데, 에러문구를 보고 다짜고짜 useRef<string>() 이렇게 string으로 타입을 지정해주면 이번엔 current에서 에러가 난다. 

 

read only라 current를 할당할 수 없어용~

 

훅의 초기값을 null로 줘놓고 null 타입을 안 주는 만행을 저질러서 변경 불가능(read only)하게 되는 것이라고 한다.

아래처럼 <string | null>로 타입을 지정해주면 오류는 사라진다.

 

 

 

 

---

참고자료

https://bobbyhadz.com/blog/react-cannot-assign-to-current-because-read-only-property