useRef React, Vue 차이

공통점

• DOM 접근: 포커스 제어, 스크롤 위치 조작, 외부 라이브러리(D3, Google Maps 등) 연결
• 값의 유지: 컴포넌트가 다시 렌더링 되어도 초기화되지 않고 유지되어야 하는 변수 저장
• 렌더링 유발 방지: ref 내부의 값이 변하더라도 UI가 다시 그려지지(Re-render) 않습니다

구분	React useRef	Vue3 ref
반응성	없음. 값이 변해도 React가 감지하지 못함	있음. Vue의 반응성 시스템에 의해 추적됨
값 접근 방식	refVariable.current	refVariable.value
주요 용도	DOM 참조, 렌더링 간 변수 유지	DOM 참조, 반응형 상태 데이터 정의
렌더링 유발	유발하지 않음	.value를 템플릿에서 쓰면 렌더링 유발

차이점

React의 useRef는 단순 자바스크립트 객체로 { current: ... } 형태의 객체를 반환하고 이 값을 수정해도 리렌더링이 발생하지 않습니다.'저장소' 역할만 합니다.

 

그러나 Vue에서 ref는 DOM 참조뿐만 아니라 반응형 데이터(State)를 만드는 데도 사용되어 ref로 선언한 값이 템플릿(HTML)에서 사용되고 있다면, 값이 바뀔 때 리렌더링 됩니다. 즉 순수 저장용이 아닌 observable한 객체입니다.

 

Vue의 경우 실무에서는 주로 ref를 사용해서 데이터 조작과 DOM 접근 기능을 동시에 사용했습니다.

React

const inputRef = useRef(null);

useEffect(() => {
  inputRef.current.focus(); // .current를 통해 접근
}, []);

<input ref={inputRef} />

Vue

const inputRef = ref(null);

onMounted(() => {
  inputRef.value.focus(); // .value를 통해 접근
});

<input ref="inputRef" />

 

React useRef, let 변수 선언의 차이점

useRef대신 let으로 선언한 변수를 사용할때 차이는 컴포넌트에 라이프 사이클과 관련이 있습니다.

리렌더링이 발생하면 let 변수로 선언한 값은 다시 초기화가 되어 값을 유지할 수 없습니다.

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

function CounterComparison() {
  const [renderCount, setRenderCount] = useState(0); // 리렌더링용 상태

  // 1. useRef 사용: 컴포넌트가 재시작되어도 값이 유지됨
  const myRef = useRef(0);

  // 2. 일반 변수 사용: 리렌더링될 때마다 다시 0으로 초기화됨
  let myLet = 0;

  const increaseValues = () => {
    myRef.current++;
    myLet++;

    console.log('Ref 값:', myRef.current);
    console.log('Let 값:', myLet);

    // UI를 업데이트하기 위해 상태 변경 (리렌더링 유발)
    setRenderCount(prev => prev + 1);
  };

  return (
    <div style={{ padding: '20px', border: '1px solid #ddd' }}>
      <h3>리렌더링 횟수: {renderCount}</h3>
      <p>Ref 값 (유지됨): <strong>{myRef.current}</strong></p>
      <p>Let 값 (초기화됨): <strong>{myLet}</strong></p>

      <button onClick={increaseValues}>값 증가 및 리렌더링</button>
      <p>※ 콘솔을 확인하면 Let 값은 클릭 시 일시적으로 1이 되지만, <br/>
      리렌더링 직후 다시 0이 되는 것을 볼 수 있습니다.</p>
    </div>
  );
}

export default CounterComparison;

 

위에 코드를 콘솔로 확인해보면 let으로 선언한 myLet 값은 1만 계속되어 찍힙니다.

0으로 초기화 된 후에 +1이 되어 1로만 값이 유지됩니다. myRef 경우 컴포넌트에 리렌더링이 발생하더라도 이전 값을 유지할 수 있어서 값이 증가됩니다.

그렇다면 컴포넌트 밖에 글로벌 영역에 let으로 선언해서 쓰면 되지 않을까 생각할수 있습니다.

컴포넌트가 한곳에서 사용되면 문제가 없지만 여러 곳에서 사용하게 되다면 해당 변숫값을 공유하게 되기 때문에 원하는 상태값을 유지할 수 없습니다. 이것은 잠재적인 버그를 만들 수 있습니다. 따라서 변수를 사용하기보다는 useRef를 사용하는 게 맞습니다.