• 0
  • 2
February 18, 2025

useRef는 언제 사용하나?

답변 확인

  • useRef는 React에서 컴포넌트의 렌더링과 관계없이 값을 유지하거나, DOM 요소에 직접 접근할 때 사용되는 훅
  • 즉, 상태(useState)처럼 값을 저장할 수 있지만, 값이 변경되더라도 컴포넌트가 리렌더링되지 않는 특징

1. useRef가 필요한 경우

  • 1️⃣ DOM 요소에 직접 접근할 때
  • 2️⃣ 값이 변경되어도 렌더링이 필요 없는 경우 (ex: 이전 값 저장, 타이머 ID 저장 등)
  • 3️⃣ 컴포넌트가 렌더링될 때도 값이 유지되어야 할 때

2. useRef 사용 예제

1️⃣ DOM 요소에 직접 접근할 때 (document.getElementById 대체)

import { useRef, useEffect } from 'react';
 
function InputFocus() {
  const inputRef = useRef(null);
 
  useEffect(() => {
    inputRef.current.focus(); // 컴포넌트 마운트 시 input에 포커스를 맞춤
  }, []);
 
  return <input ref={inputRef} placeholder="입력하세요" />;
}
  • ✅ useRef를 사용하면 document.getElementById없이 DOM 요소에 직접 접근 가능
  • ✅ 컴포넌트가 마운트될 때 자동으로 input에 포커스를 맞출 수 있음

2️⃣ 값이 변경되어도 리렌더링을 방지 (useState와 비교)

import { useState, useRef } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0); // 상태(state)
  const countRef = useRef(0); // useRef로 값 저장
 
  const handleClick = () => {
    setCount(count + 1); // 상태 변경 → 리렌더링 발생
    countRef.current += 1; // ref 값 변경 → 리렌더링 없음
    console.log('State:', count, 'Ref:', countRef.current);
  };
 
  return (
    <div>
      <p>State 값: {count}</p>
      <p>Ref 값: {countRef.current}</p>
      <button onClick={handleClick}>+1 증가</button>
    </div>
  );
}
  • ✅ useState는 값이 변경되면 컴포넌트가 리렌더링됨
  • ✅ useRef는 값이 변경되어도 리렌더링되지 않음 (console.log로만 확인 가능)
  • ✔ 렌더링과 관계없이 값이 유지되어야 한다면 useRef를 사용

3️⃣ 이전 값 저장 (이전 렌더링 값과 비교)

import { useState, useEffect, useRef } from 'react';
 
function PreviousValue() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef(0); // 이전 값 저장
 
  useEffect(() => {
    prevCountRef.current = count; // 현재 count를 저장
  }, [count]);
 
  return (
    <div>
      <p>현재 값: {count}</p>
      <p>이전 값: {prevCountRef.current}</p>
      <button onClick={() => setCount(count + 1)}>+1 증가</button>
    </div>
  );
}
  • ✅ prevCountRef는 렌더링이 발생해도 이전 값을 유지
  • ✅ 이전 값과 현재 값을 비교하는 기능을 구현할 때 유용

4️⃣ 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>
  );
}
  • ✅ useRef를 사용하면 타이머 ID를 저장하여 clearInterval로 정리 가능
  • ✅ 컴포넌트가 리렌더링되더라도 타이머 ID가 유지됨

3. useRef vs useState 차이점

구분 useRef useState
렌더링 여부 값이 변경되어도 리렌더링되지 않음 값이 변경되면 리렌더링됨
DOM 접근 가능 여부 ref.current를 사용해 직접 접근 가능 직접적인 DOM 접근 불가
값 유지 여부 렌더링이 되어도 값이 유지됨 렌더링 시 새로운 값으로 초기화될 수 있음
주요 사용 사례 DOM 요소 접근, 이전 값 저장, 타이머 ID 저장 등 UI 상태 업데이트
  • 📌 렌더링 없이 값을 유지해야 한다면 useRef를 사용하고, 상태 업데이트가 필요하면 useState를 사용!

🔹 결론

  • ✔ useRef는 DOM 요소에 접근하거나, 리렌더링 없이 값을 유지할 때 사용
  • ✔ useRef를 활용하면 불필요한 리렌더링을 방지하고, 성능을 최적화할 수 있음
  • ✔ 주요 사용 사례: DOM 조작, 이전 값 저장, setTimeout/Interval ID 저장, 값 변경 없이 상태 유지

참고 자료

Top comments (2)

  • DavidYang2월 19일

    우와 댓글이다~

  • Olivia2월 19일

    오오 ~~ :) 너무 글 좋네용