기능?

• DOM 요소, 저장공간에 접근을 위해서 사용하는 리액트 훅

• 다른 hooks 들은 state가 변할 때마다 렌더링 되면서 컴포넌트 내부 변수가 초기화.

• But, Ref의 변화 => No 렌더링 => 변수 값 유지됨.

용도?

• input 요소를 클릭하지 않고 포커스를 주려고 할때. Ex) 로그인 화면에서 아이디 input을 클릭하지 않아도 자동 포커스 주고 입력하게 하기.

---

사용법

// 초기화
const idInputRef = useRef<HTMLInputElement>(null);
const pwInputRef = useRef<HTMLInputElement>(null);


// useRef값에 엑세스

const handleSubmit: FormEventHandler<HTMLFormElement> = (e) => {
    e.preventDefault();

  // 선택적 연결 연산자. current 가 null or undefine 이여도 오류 발생 X
    const id = idInputRef.current?.value;
    const pw = pwInputRef.current?.value;
    
    }
    

/// useRef를 DOM 요소에 연결
    
    
return (
    <form
      onSubmit={handleSubmit}
      className="flex flex-col gap-y-4 items-center"
    >
      <input
        className="border max-w-60"
        ref={idInputRef}
        placeholder="ID"
        type="text"
      />
      <input
        className="border max-w-60"
        ref={pwInputRef}
        placeholder="PW"
        type="password"
      />
        )