(React) useRef는 언제쓰는걸까?

서론

React 공부하면서 useState는 익숙해졌는데, 어느 날 코드 보다가 useRef라는 게 나오더라고 처음엔 "이것도 상태 관리하는 건가?" 싶었는데 막상 써보니까 useState랑은 완전 다른 용도였음

특히 input 태그에 자동으로 포커스 주고 싶을 때 useRef 없이는 방법이 없더라 그래서 useRef가 정확히 뭐고 언제 쓰는 건지 정리해봄

---

본론

useRef는 렌더링에 영향을 주지 않고 값을 저장하거나 DOM 요소에 직접 접근할 때 사용하는 Hook임

useState와 비슷해 보이지만 완전 다른 용도로 쓰임

useState vs useRef 차이점

useState의 특징

• 값이 바뀌면 컴포넌트가 다시 렌더링됨
• 화면에 보이는 데이터를 관리할 때 사용
• 값이 변경되면 사용자가 즉시 확인 가능

useRef의 특징

• 값이 바뀌어도 컴포넌트가 다시 렌더링 안 됨
• 렌더링과 관계없는 값을 저장하거나 DOM을 직접 다룰 때 사용
• 컴포넌트가 언마운트될 때까지 값이 유지됨

import { useState, useRef } from 'react';

function Example() {
  const [count, setCount] = useState(0); // 화면에 보임, 변경되면 리렌더링
  const countRef = useRef(0); // 화면에 안 보임, 변경되어도 리렌더링 안 됨

  return (
    <div>
      <p>State: {count}</p>
      <button onClick={() => setCount(count + 1)}>State 증가</button>
      <button onClick={() => countRef.current += 1}>Ref 증가</button>
    </div>
  );
}

useRef는 언제 쓰나?

1. DOM 요소에 직접 접근할 때

가장 많이 쓰는 경우임

• input에 자동으로 포커스 주기
• 스크롤 위치 조정하기
• 요소의 크기나 위치 측정하기

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

  const handleClick = () => {
    inputRef.current.focus(); // input에 포커스 줌
  };

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

2. 렌더링에 영향 없이 값을 저장할 때

화면에는 안 보이지만 계속 기억해야 하는 값들

• 타이머 ID 저장
• 이전 값 기억하기
• API 호출 취소를 위한 컨트롤러 저장

function Timer() {
  const [seconds, setSeconds] = useState(0);
  const timerRef = useRef(null);

  const startTimer = () => {
    timerRef.current = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);
  };

  const stopTimer = () => {
    clearInterval(timerRef.current); // 저장된 타이머 ID로 정지
  };

  return (
    <div>
      <p>{seconds}초</p>
      <button onClick={startTimer}>시작</button>
      <button onClick={stopTimer}>정지</button>
    </div>
  );
}

3. 불필요한 렌더링을 방지할 때

값이 자주 바뀌는데 화면에는 보여줄 필요 없는 경우

• 클릭 횟수 카운팅 (화면엔 안 보여줌)
• 스크롤 위치 추적
• 애니메이션 프레임 ID

function ScrollTracker() {
  const scrollCount = useRef(0);

  const handleScroll = () => {
    scrollCount.current += 1;
    console.log(`스크롤 횟수: ${scrollCount.current}`);
    // 여기서 setState 쓰면 스크롤할 때마다 리렌더링 발생 -> 성능 저하
  };

  return (
    <div onScroll={handleScroll} style={{ height: '200px', overflow: 'scroll' }}>
      <div style={{ height: '1000px' }}>스크롤 해보세요</div>
    </div>
  );
}

주의할 점

ref.current로 접근해야 함

• useRef로 만든 변수는 .current 속성으로 값에 접근함
• ref.current = 새값 이런 식으로 값 변경 가능

렌더링 중에는 ref 값을 읽거나 쓰지 말 것

• 렌더링 결과가 예측 불가능해질 수 있음
• 이벤트 핸들러나 useEffect 안에서만 사용하는 게 안전

---

결론

useRef는 "렌더링 없이 값을 기억하거나 DOM을 직접 다룰 때" 쓰는 Hook임

useState는 화면에 보여줄 데이터 관리용, useRef는 화면 뒤에서 값을 저장하거나 DOM 조작용으로 구분하면 쉬움

특히 input 포커스, 타이머, 스크롤 위치 같은 걸 다룰 때 진짜 유용함

처음엔 언제 써야 할지 헷갈렸는데 "이거 화면에 안 보여도 되는데?" 싶으면 useRef 쓰면 됨

앞으로 프로젝트하면서 useRef 활용도 높여봐야겠음!