useRef의 주요 사용 사례는 무엇인가요?

Question

IT Interview Practice · Accepted Answer

`useRef`는 render 사이에 **지속되는** 가변 컨테이너 `{ current: ... }`를 반환하지만, 결정적으로 **이를 변경해도 re-render가 트리거되지 않습니다**. 두 가지 별개의 용도가 있습니다:

## 1. DOM 노드 접근

```jsx
function SearchBox() {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus(); // mount 시 명령형으로 입력에 포커스
  }, []);
  return <input ref={inputRef} />;
}
```

## 2. render 사이에 가변 값 보관

render를 유발하지 않고 무언가를 기억하는 데 사용하세요 — 타이머 id, prop의 이전 값, 라이브러리 인스턴스 등:

```jsx
function Timer() {
  const intervalId = useRef(null);
  const start = () => {
    intervalId.current = setInterval(tick, 1000); // render 사이에 저장
  };
  const stop = () => clearInterval(intervalId.current);
}
```

## 핵심 구분: ref vs state

```jsx
const countRef = useRef(0);
countRef.current++;  // 값을 변경하지만 UI는 업데이트되지 않음

const [count, setCount] = useState(0);
setCount(count + 1); // 값을 변경하고 re-render함
```

따라서 규칙은: **UI가 값을 반영해야 한다면 state를 사용하고, 단지 "무대 뒤" 데이터라면 ref를 사용하세요.** render 중에 `ref.current`를 읽기/쓰기 하는 것은 권장되지 않습니다(effect/핸들러에서 하세요). ref는 React의 render 사이클에 의해 추적되지 않기 때문입니다.

1. DOM 노드 접근

관련 질문

2. render 사이에 가변 값 보관

핵심 구분: ref vs state