useRef — 리렌더 없이 붙잡아 두는 도구

useRef는 리액트가 기본으로 주는 훅이에요. const 이름 = useRef(초깃값)으로 만들면, .current라는 칸 하나를 가진 상자를 돌려줘요. 이 상자는 딱 두 가지 상황에서 유용해요.

리액트는 보통 화면을 선언형으로 그려요. 우리가 document.querySelector로 요소를 찾아 직접 만질 일이 거의 없죠. 하지만 입력창에 포커스 주기, 스크롤 위치 옮기기, 비디오 재생/정지처럼 진짜 DOM 요소를 직접 조작해야 하는 경우가 있어요. 이럴 때 useRef를 씁니다.

3단계로 연결해요 — ① useRef(null)로 ref를 만들고, ② JSX 요소에 ref={...}로 붙이고, ③ 필요할 때 ref.current로 실제 DOM에 접근합니다.

import { useRef } from 'react';

function SearchBox() {
  // ① current가 null인 상자를 만든다
  const inputRef = useRef(null);

  function handleClick() {
    // ③ ref.current === 실제 <input> DOM 요소
    inputRef.current.focus();
  }

  return (
    <div>
      {/* ② ref를 input에 붙인다 */}
      <input ref={inputRef} placeholder="검색어" />
      <button onClick={handleClick}>검색창으로 이동</button>
    </div>
  );
}

useRef는 DOM 말고 그냥 값을 담아 두는 용도로도 써요. 이때 특징이 두 가지예요.

function Timer() {
  const [count, setCount] = useState(0);
  // 인터벌 ID처럼 "화면엔 안 보이지만 기억해 둘 값"
  const timerId = useRef(null);

  function start() {
    // .current에 저장 — 리렌더 안 일어남
    timerId.current = setInterval(() => {
      setCount(c => c + 1); // 이건 state라 리렌더됨
    }, 1000);
  }

  function stop() {
    clearInterval(timerId.current); // 저장해 둔 값 재사용
  }

  return (
    <div>
      <p>{count}초</p>
      <button onClick={start}>시작</button>
      <button onClick={stop}>정지</button>
    </div>
  );
}

지금까지 배운 useState·useEffect·useRef 같은 모든 훅에는 반드시 지켜야 하는 규칙이 있어요. 딱 두 개예요.

function Bad({ show }) {
  if (show) {
    // ❌ 조건문 안에서 훅 호출 — 금지!
    const [name, setName] = useState('');
  }
  // ...
}

function Good({ show }) {
  // ✅ 최상위에서 항상 호출
  const [name, setName] = useState('');
  // 조건 분기는 훅 호출 "다음"에
  if (show) { /* name 사용 */ }
  // ...
}

리액트에는 useState·useEffect·useRef 말고도 여러 훅이 있어요. 뒤 장에서 하나씩 제대로 다루니, 여기선 이름과 용도만 살짝 봐 둬요.