[React] useRef

useRef란?

• useRef는 React의 훅(Hook) 중 하나이다.
• 컴포넌트가 리렌더링되어도 값이 유지되는 mutable 객체를 생성할 때 사용한다.
• DOM 요소에 직접 접근할 때 사용한다.
• 예시

  const ref = useRef(initialValue);

• ref.current를 통해 값을 읽거나 변경할 수 있다.
• 값이 변경되어도 리렌더링을 발생시키지 않는다.
• 주로 DOM 요소 접근, 이전 값 저장, setTimeout/interval ID 관리 등에 사용된다.

useRef 🆚 useState

구분	useRef	useState
리렌더링 여부	값이 변경되어도 리렌더링 되지 않음	값이 변경되면 리렌더링됨
값 유지	컴포넌트가 리렌더링되어도 값 유지됨	상태 변경 시 새로운 값으로 업데이트 됨
주 용도	- DOM 요소 접근 - 이전 값 저장 - setTimeout 등 ID 저장	- UI 상태 관리 - 값 변경 시 리렌더링이 필요한 경우

• ⚠️ useRef는 값이 변해도 리렌더링되지 않으므로, 화면에 즉각 반영이 필요한 값이라면 useState를 사용해야 한다.

✅ useRef 사용 예시

1️⃣ DOM 요소 접근 (포커스 설정)

• useRef를 사용하면 특정 DOM 요소에 직접 접근할 수 있다.

import { useRef, useEffect } from 'react';

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

  useEffect(() => {
    inputRef.current.focus(); // 마운트 시 input에 자동으로 포커스
  }, []);

  return <input ref={inputRef} placeholder="자동 포커스" />;
}

2️⃣ 값 저장 (리렌더링 없이 값 변경)

• useRef를 사용하면 상태를 유지하면서도 리렌더링 없이 값을 변경할 수 있다.

import { useRef } from 'react';

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

  const handleClick = () => {
    countRef.current += 1;
    console.log(`현재 count 값: ${countRef.current}`); // UI에는 반영되지 않음
  };

  return <button onClick={handleClick}>Click me</button>;
}

3️⃣ 이전 값 저장

• useRef를 활용하면 이전 상태 값을 저장할 수 있다.

import { useState, useRef, useEffect } from 'react';

function PreviousValue() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count; // 현재 count를 저장
  }, [count]);

  return (
    <div>
      <h1>현재 값: {count}</h1>
      <h2>이전 값: {prevCountRef.current}</h2>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

4️⃣ setTimeout / interval ID 저장

• useRef를 사용하면 setTimeout이나 setInterval의 ID를 저장하고 관리할 수 있다.

import { useRef } from 'react';

function Timer() {
  const timerRef = useRef(null);

  const startTimer = () => {
    timerRef.current = setInterval(() => {
      console.log('타이머 실행 중');
    }, 1000);
  };

  const stopTimer = () => {
    clearInterval(timerRef.current);
    console.log('타이머 정지');
  };

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

⚠️ useRed 주의사항

1️⃣ ref.current 값이 변경되어도 리렌더링되지 않음

• useRef의 값이 변해도 UI가 업데이트되지 않는다.
• 만약, 값 변경 시 화면에 반영되길 원하면 useState를 사용해야 한다.

2️⃣ 초기 값이 null인 경우, ref.current를 안전하게 체크해야 함

• ref.current가 null일 수 있으므로, DOM 요소에 접근하기 전에 반드시 체크해야 한다.

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

3️⃣ 컴포넌트가 언마운트될 때 useRef를 이용해 클린업 필요

• setTimeout이나 setInterval을 사용할 경우, 언마운트 시 정리(clean-up)를 해야 한다.

useEffect(() => {
  const timer = setTimeout(() => {
    console.log('타이머 실행');
  }, 2000);

  return () => clearTimeout(timer); // 언마운트 시 타이머 제거
}, []);

✨ 요약

개념	설명
useRef란?	리렌더링 없이 값을 유지하고, DOM 요소에 접근할 때 사용하는 훅
useRef 🆚 useState	useRef는 값이 변경되어도 렌더링되지 않음, useState는 값 변경 시 렌더링됨
사용 예시	1) DOM 요소 접근 2) 값 저장 3) 이전 값 저장 4) setTimeout/interval ID 저장
주의사항	- 값이 변해도 렌더링되지 않음 - ref.current가 null일 수 있음 - 클린업 필요