useRef란?

useRef는 컴포넌트가 리렌더링 되어도 유지되는 값을 저장할 수 있게 해주는 React 훅이다. 그리고 주로 DOM 요소에 접근할 때 많이 사용된다.

import { useRef } from "react";

function MyComponent() {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleClick = () => {
    if (inputRef.current) {
      inputRef.current.focus(); // DOM에 직접 접근!
    }
  };

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>포커스 주기</button>
    </>
  );
}

document.querySelector를 써도 되지 않을까?

React에서는 Virtual DOM을 사용해서 실제 DOM을 직접 건드리지 않고, 상태(state)에 따라 UI를 선언적으로 그려준다.
이 말은 곧, 직접 DOM에 접근하는 방식인 document.querySelector는 React의 흐름과 어긋날 수 있다는 의미다.

예를 들어 document.querySelector를 사용하면 컴포넌트가 리렌더링되었을 때, 우리가 선택한 DOM 요소가 사라졌거나 바뀌었을 가능성이 있다.

또한, SSR(서버 사이드 렌더링) 환경에서는 브라우저가 아닌 곳에서 코드가 실행되기 때문에, document 자체가 존재하지 않아 오류가 발생할 수도 있다.

useRef가 필요한 이유

useRef를 사용하면 다음과 같은 장점이 있다:

1. 컴포넌트 생명주기 내에서 안전하게 DOM을 참조할 수 있다.

   • ref를 통해 React가 DOM 요소를 연결해주기 때문에, document.querySelector처럼 직접 DOM을 탐색하지 않아도 된다.

2. 리렌더링에도 ref 값은 변하지 않는다.

   • useRef로 얻은 객체는 컴포넌트가 리렌더링되어도 유지되기 때문에, 반복해서 DOM을 다시 찾을 필요가 없다.

3. React의 선언적 방식과 잘 어울린다.

   • DOM을 직접 제어하는 imperative한 코드 대신, 필요한 순간에만 최소한으로 접근하는 방식이라 코드가 깔끔하고 예측 가능하다.

정리

useRef는 단순히 DOM을 선택하는 도구가 아니라, React와 잘 어울리는 방식으로 DOM을 다루는 방법이다.
DOM을 직접 다루고 싶을 때마다 document.querySelector를 쓰기보다는, ref를 통해 React가 관리하는 DOM 흐름 안에서 작업하는 것이 더 안전하고 직관적이다.