React - useRef

UseRef는 다음과 같은 목적 때문에 사용되는 Hook이다.

1. 저장공간
2. DOM에 접근

1. 저장공간
   a. 기본적으로 state와 비슷한 역할을 한다. 다만 state는 변화가 발생하면 랜더링이 되면서 내부 변수들이 초기화 된다.
   b. 하지만 ref에 저장한 값은 랜더링을 일으키지 않는다. 즉, ref의 값 변화가 일어나도 랜더링으로 인해 내부 변수들이 초기화 되는 것을 막을 수 있다.

이같은 성질로 인한 state와 ref의 용도

1. state는 리랜더링이 꼭 필요한 값을 다룰 때 사용한다.
2. ref는 리랜더링을 발생시키지 않는 값을 저장할 때 사용한다.

2. DOM에 접근

ex) useRef 사용하여 포커싱 주기

import { useEffect, useRef } from "react";
import "./App.css";

function App() {
  const idRef = useRef("");

  // 렌더링이 될 때
  useEffect(() => {
    idRef.current.focus();
  }, []);

  return (
    <>
      <div>
        아이디 : <input type="text" ref={idRef} />
      </div>
      <div>
        비밀번호 : <input type="password" />
      </div>
    </>
  );
}

export default App;

idRef라는 변수명을 지정하여 특정 태그의 속성으로 내려주면 위에서의 예시처럼 DOM 상의 특정 태그에 접근할 수 있게 된다.