📋 useRef란?

useRef 는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. - React 공식 홈페이지

useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. 여기서 Ref는 reference, 즉 참조를 뜻한다.

우리가 자바스크립트를 사용 할 때에는, 우리가 특정 DOM 을 선택하기 위해서 querySelector 등의 함수를 사용한다.

React를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 필요하다. 그럴때 우리는 useRef라는 React Hook을 사용한다.

아직 설명만으로는 감이 잘 안올 수 있는데 사용 예시를 함께 살펴보자.

---

📌 1. useRef 사용 예시 - 변수 관리

(Open Sandbox를 누르거나 왼쪽 바를 땡기면 코드를 확인할 수 있다.)

여기 useState를 사용해 값을 저장한 stateCount, useRef를 사용해 값을 저장한 refCount, 변수를 통해 값을 저장한 varCount가 있다.

ref up 버튼을 누르면 각각의 값이 올라가고 콘솔창에 출력이 되는 형태인데, ref up을 아무리 눌러도 콘솔창에만 출력되고 화면에 렌더링이 되지 않는것을 확인할 수 있다.

하지만 state up 버튼을 누르면 화면이 렌더링되면서 올려놨던 refCount값도 화면에 출력되게 된다. 이를 통해 우리는 useRef로 관리하는 값은 값이 변해도 화면이 렌더링되지 않음을 알 수 있다.

또 var up 버튼을 통해 변숫값을 아무리 높혀놔도 state up 버튼을 통해 렌더링을 한다면, 컴포넌트 내부에 있는 let varCount = 0; 이 계속 실행되기에 값이 초기화된다.

useRef가 유용한 상황은 이런 상황이 있다.
예를 들어 내 컴포넌트가 몇번 렌더링됐는지 알고싶은 상황이라고 해보자.

function App() {
  const [count, setCount] = useState(1);
  const [renderingCount, setRedneringCount] = useState(1);
 
  useEffect(() => {
    console.log("rendering Count : ", renderingCount);
    setRedneringCount(renderingCount + 1);
  });

  return (
    <div>
      <div>Count : {count}</div>
      <button onClick={() => setCount(count + 1)}> count up </button>
    </div>
  );
}

이렇게 로직을 짜면, useEffect 안에있는 setRenderingCount()가 계속해서 컴포넌트를 리렌더링해서 무한 루프에 빠지게 된다.

이를 useRef를 통해 효율적으로 관리할 수 있다.

function App() {
  const [count, setCount] = useState(1);
  const renderingCount = useRef(1);

  useEffect(() => {
    console.log("renderingCount : ", renderingCount.current);
    ++renderingCount.current;
  });

  return (
    <div>
      <div>Count : {count}</div>
      <button onClick={() => setCount(count + 1)}> count up </button>
    </div>
  );
}

---

📌 2. useRef 사용 예시 - DOM 요소 선택

최신 웹사이트들을 보면 로그인 화면에 들어가자마자 아이디 input에 포커스되어있는 경우가 대부분이다.

이를 useRef를 통해 DOM요소를 선택하여 구현할 수 있다.

(Open Sandbox를 누르거나 왼쪽 바를 땡기면 코드를 확인할 수 있다.)

focus버튼을 누르면 input 창에 focus되는 것을 확인할 수 있다.

useRef를 통해 마운트될 때 focus되게 설정해놓을 수도 있지만 블로그 포스팅이라는 환경 상, 버튼을 누르면 focus되도록 설정해놓았다.

또 focus 버튼을 누르고 콘솔창에 useRef를 통해 선택된 DOM 요소를 확인할수 있도록 해놓았으니 한번쯤 확인해보면 좋을 듯 하다.