[React] useRef

Byeonghyeon·2025년 1월 13일

React

공부

목록 보기

5/21

useRef

useRef는 렌더링에 필요하지 않은 값을 참조할 수 있는 Hook이다.

Ref란 reference, 즉 참조를 뜻한다.

저장공간 또는 DOM 요소에 접근하기 위해 사용되는데, Vanilla JS를 사용할 때는 특정 DOM을 선택하기 위해 querySelector, getElementById 등의 함수를 사용한다.

React를 사용할 때 DOM 요소에 접근하기 위해 사용하는 것이 useRef이다.

useRef(initialValue)

매개변수

initilaValue : ref 객체의 current 프로퍼티의 초기 설정 값이다. 어떤 유형의 값이든 지정할 수 있으며 초기 렌더링 이후부터는 무시된다.

반환값

단일 프로퍼티를 가진 객체를 반환한다,

current : 처음에는 전달한 initilaValue로 설정된다. 나중에 다른 값으로 바꿀 수 있다. ref 객체를 JSX 노드의 ref 어트리뷰트로 React에 전달하면 React는 current 프로퍼티를 설정한다.

다음 렌더링에서 useRef는 동일한 객체를 반환한다.

주의 사항

ref.current 프로퍼티는 state와 달리 변이할 수 있다.
ref.current 프로퍼티를 변경해도 React는 컴포넌트를 재렌더링하지 않는다.
초기화를 제외하고는 렌더링 중에 ref.current를 쓰거나 읽지 말아야 한다. 이렇게 하면 컴포넌트의 동작을 예측할 수 없게 된다.

사용 예시

DOM 요소 접근

import { useEffect, useRef } from 'react';
import './App.css'

function App() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus() // input 요소에 포커스를 설정
    }
  }, []);

  return(
    <div>
     <input ref={inputRef} type='text' placeholder='do something...'/>
    </div>
  );
}

export default App;

예를 들어서, input 창에 뭔가를 하라는 사용자에게 주고 싶을 때 focus를 줘서 알려주고 싶다면, useRef를 사용할 수 있다.

변수 관리

 function App() {
  const refCount = useRef(0); // 리렌더링 간 값을 유지
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const refIncrement = () => {
    refCount.current += 1;
  }

  return (
    <div>
      <p>Count: {count}</p>
      <p>refCount: {refCount.current}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={refIncrement}>refIncrement</button>
    </div>
  );
}

export default App;