[React] useRef

1. useRef란?

useRef는 React에서 DOM 요소에 직접 접근하거나 컴포넌트의 값을 저장할 때 사용하는 훅이다. 상태(useState)와 달리 값이 변경되어도 컴포넌트가 리렌더링되지 않는다는 특징이 있다.

2. useRef의 주요 기능

2.1. DOM 요소 접근

useRef를 사용하면 document.querySelector 없이도 JSX 요소에 직접 접근할 수 있다.

import { useRef, useEffect } from "react";

function InputFocus() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} type="text" />;
}

위 코드에서는 inputRef가 input 요소를 가리키며, 컴포넌트가 마운트될 때 focus()가 자동으로 실행된다.

2.2. 값 저장 (렌더링 영향 없음)

useRef는 렌더링과 무관하게 값을 유지할 수 있다. 상태(useState)와 달리 값이 변경되어도 리렌더링이 발생하지 않는다.

import { useRef, useState } from "react";

function Counter() {
  const countRef = useRef(0);
  const [state, setState] = useState(0);

  const incrementRef = () => {
    countRef.current += 1;
    console.log("Ref count:", countRef.current);
  };

  const incrementState = () => {
    setState(state + 1);
  };

  return (
    <div>
      <p>State: {state}</p>
      <p>Ref: {countRef.current}</p>
      <button onClick={incrementState}>State 증가</button>
      <button onClick={incrementRef}>Ref 증가</button>
    </div>
  );
}

위 코드에서 countRef 값이 변경되어도 컴포넌트가 리렌더링되지 않으며, 화면에 바로 반영되지 않는다. 반면 useState를 이용하면 상태 변경 시 리렌더링이 발생한다.

2.3. useRef와 useEffect 함께 사용

useRef는 useEffect와 함께 사용하면 특정 값이 변경될 때 실행할 동작을 지정할 수 있다.

import { useRef, useEffect } from "react";

function Timer() {
  const countRef = useRef(0);

  useEffect(() => {
    const interval = setInterval(() => {
      countRef.current += 1;
      console.log("현재 카운트:", countRef.current);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <p>콘솔을 확인하세요.</p>;
}

위 코드에서는 useRef를 이용해 카운트를 증가시키면서도 리렌더링을 방지할 수 있다.

3. useRef vs useState 비교

기능useRefuseState

값 변경 시 리렌더링	❌	✅
값 유지	✅	✅
DOM 접근 가능	✅	❌

useRef는 렌더링 영향을 주지 않고 값을 저장할 때 유용하며, useState는 상태 변경을 통해 화면을 업데이트할 때 적절하다.

3.1. state와 ref의 차이점

1. useState는 값이 변경될 때 컴포넌트가 리렌더링되지만, useRef는 값이 변경되어도 리렌더링되지 않는다.
2. useRef는 변경된 값을 화면에 즉시 반영하지 않으며, 직접 DOM을 조작하는 경우에 유용하다.
3. useState는 변경될 때마다 새로운 값을 기반으로 렌더링을 수행하지만, useRef는 동일한 객체를 유지하면서 변경을 추적할 수 있다.
4. useRef는 보통 렌더링 사이에서 유지해야 하는 값(예: 타이머 ID, 이전 값 저장 등)에 적합하며, useState는 UI 업데이트가 필요한 데이터에 적합하다.

4. 정리

• useRef는 DOM 요소 접근과 렌더링 영향 없이 값을 유지하는 데 사용된다.
• useState와 달리 값이 변경되어도 리렌더링이 발생하지 않는다.
• useEffect와 함께 활용하면 다양한 기능을 구현할 수 있다.
• 상태 변경이 필요하지 않은 경우 useRef를 사용하면 불필요한 렌더링을 방지할 수 있다.