🤷🏻‍♀️ useRef?

useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다.
useRef는 매번 렌더링을 할 때 동일한 ref 객체를 제공한다는 것입니다.
useRef는 내용이 변경될 때 그것을 알려주지는 않는다는 것을 유념하세요.
.current 프로퍼티를 변형하는 것이 리렌더링을 발생시키지는 않습니다.

useRef는 저장 공간과 DOM요소에 접근을 위해 사용되는 HOOKS임
State가 변할때마다(useState) 리렌더링 되면서 컴포넌트 내부 변수들이 초기화되는데,
Ref안에 있는 값은 아무리 변경해도 컴포넌트는 다시 렌더링 되지 않음
즉, 불필요한 렌더링을 막을 수 있음
또한 아무리 리렌더링이 되어도 ref안에 저장되어 있는 값은 변화되지 않고 유지됨
따라서 변경 시 렌더링을 발생시키지말아야하는 값을 다를 때 ref 사용

const App = () => {
  const input = useRef<HTMLInputElement>(null);
  const handleClick = () => {
    if(input.current){
      input.current.focus();
    }
  }
  
  return (
    <div>
      <input type="text" ref={inpit} />
      <button type="button" onClick={handleClick}>Click to Focus</button>
    </div>
  );
}