useRef란

개념

React의 Hook으로, 컴포넌트 생명주기 동안 변경 가능한 참조(reference)를 생성하는 함수

특징

• 값을 변경해도 컴포넌트가 리렌더링되지 않습니다.
• .current 프로퍼티를 통해 값에 접근하고 수정합니다.
• 컴포넌트 전체 생명주기 동안 동일한 참조를 유지합니다.

1) 상태 변경 시 리렌더링 없음

function RefExample() {
 const countRef = useRef(0);
 
 const handleClick = () => {
   countRef.current += 1; // 리렌더링 발생 X
   console.log(countRef.current);
 };
}

2) 지속적인 참조 유지

Copyfunction PersistentRefExample() {
  const lastRenderTime = useRef(Date.now());
  
  // 컴포넌트가 다시 렌더링되어도 값 유지
  console.log(lastRenderTime.current);
}

사용법

1) DOM 요소 직접 접근

function InputFocusExample() {
  const inputRef = useRef(null);
  
  const focusInput = () => {
    inputRef.current.focus();
  };
  
  return (
    <>
      <input ref={inputRef} />
      <button onClick={focusInput}>포커스</button>
    </>
  );
}

2) 이전 상태 값 추적

function PreviousValueTracker() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();
  
  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);
  
  const prevCount = prevCountRef.current;
}

useRef vs useState

useState

• 상태 변경 시 컴포넌트 리렌더링
• 화면에 즉시 반영되는 값
• 상태 관리에 사용

useRef

• 값 변경 시 리렌더링 없음
• DOM 요소 참조
• 렌더링과 무관한 값 저장

주의사항

• 꼭 필요한 경우에만 사용
• 과도한 ref 사용은 코드 가독성 저하
• 가능한 React의 선언적 방식 우선시