React useRef 타입 정의

useRef의 타입을 정의할 때는 제네릭을 이용하여 설정한다.

React에서 useRef를 사용하기 위한 방법엔 크게 두 가지가 있다.

1. 값 저장 용도
2. DOM 참조 용도

값 저장 용도

값을 저장하기 위한 useRef의 타입은 제네릭을 이용해 useRef에 넣을 초기값의 타입을 넣어주면 된다.

const numId = useRef<number>(0)
const textId = useRef<string>("")

DOM 참조 용도

DOM을 참조하기 위해서는 참조하려고 하는 HTML Element를 제네릭을 이용해 설정하고 초기값으로 null을 설정하면 된다.

1. 제네릭 설정

const Home = () => {
  const [inputValue, setInputValue] = useState("")
  
  const inputRef = useRef<HTMLInputElement>(null)
  
  return (
    <input ref={inputRef} value={inputValue} onChange={e => setInputValue(e.target.value)} />
  )
}

inputRef는 <input /> Element를 참조하기 위한 용도이므로 제네릭으로 HTMLInputElement를 넘겨줘야 한다.

만약 <input />이 아니라 <button>이나 <div>등 다른 Element를 참조하기 위함이면
그에 해당하는 HTML Element를 적어주면 된다. (ex. HTMLButtonElement, HTMLDivElement ...)

만약 어떤 element를 넣어야 할 지 모른다면 ref에 마우스를 올리면 알 수 있다.

2. 초기값 null

그리고 useRef() 괄호 안에는 null을 넣어주면 된다.

그 이유는 useRef()로 참조되는 DOM은 최초 mount전에 null이기 때문이다.

useRef가 최초 null값이 될 수 있는 이유

useRef()를 설정하고 이를 적용하는 구간은 return문이다.

하지만 그 전에 useEffect()에서 inputRef를 조작하려 한다면 아직 <input />이 렌더링 되지 않은 상태에서 inputRef를 접근하기에 null값이 될 수 있다.

이를 방지하기 위해서는 if조건문이나 &&로 조건을 생성해주면 된다.