Frontend/React
[React] useRef
sliver__
2025. 2. 16. 12:44
728x90
1. useRef란?
useRef는 React에서 DOM 요소에 직접 접근하거나 컴포넌트의 값을 저장할 때 사용하는 훅이다. 상태(useState)와 달리 값이 변경되어도 컴포넌트가 리렌더링되지 않는다는 특징이 있다.
2. useRef의 주요 기능
2.1. DOM 요소 접근
useRef를 사용하면 document.querySelector 없이도 JSX 요소에 직접 접근할 수 있다.
import { useRef, useEffect } from "react";
function InputFocus() {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus();
}, []);
return <input ref={inputRef} type="text" />;
}
위 코드에서는 inputRef가 input 요소를 가리키며, 컴포넌트가 마운트될 때 focus()가 자동으로 실행된다.
2.2. 값 저장 (렌더링 영향 없음)
useRef는 렌더링과 무관하게 값을 유지할 수 있다. 상태(useState)와 달리 값이 변경되어도 리렌더링이 발생하지 않는다.
import { useRef, useState } from "react";
function Counter() {
const countRef = useRef(0);
const [state, setState] = useState(0);
const incrementRef = () => {
countRef.current += 1;
console.log("Ref count:", countRef.current);
};
const incrementState = () => {
setState(state + 1);
};
return (
<div>
<p>State: {state}</p>
<p>Ref: {countRef.current}</p>
<button onClick={incrementState}>State 증가</button>
<button onClick={incrementRef}>Ref 증가</button>
</div>
);
}
위 코드에서 countRef 값이 변경되어도 컴포넌트가 리렌더링되지 않으며, 화면에 바로 반영되지 않는다. 반면 useState를 이용하면 상태 변경 시 리렌더링이 발생한다.
2.3. useRef와 useEffect 함께 사용
useRef는 useEffect와 함께 사용하면 특정 값이 변경될 때 실행할 동작을 지정할 수 있다.
import { useRef, useEffect } from "react";
function Timer() {
const countRef = useRef(0);
useEffect(() => {
const interval = setInterval(() => {
countRef.current += 1;
console.log("현재 카운트:", countRef.current);
}, 1000);
return () => clearInterval(interval);
}, []);
return <p>콘솔을 확인하세요.</p>;
}
위 코드에서는 useRef를 이용해 카운트를 증가시키면서도 리렌더링을 방지할 수 있다.
3. useRef vs useState 비교
기능useRefuseState
값 변경 시 리렌더링 | ❌ | ✅ |
값 유지 | ✅ | ✅ |
DOM 접근 가능 | ✅ | ❌ |
useRef는 렌더링 영향을 주지 않고 값을 저장할 때 유용하며, useState는 상태 변경을 통해 화면을 업데이트할 때 적절하다.
3.1. state와 ref의 차이점
- useState는 값이 변경될 때 컴포넌트가 리렌더링되지만, useRef는 값이 변경되어도 리렌더링되지 않는다.
- useRef는 변경된 값을 화면에 즉시 반영하지 않으며, 직접 DOM을 조작하는 경우에 유용하다.
- useState는 변경될 때마다 새로운 값을 기반으로 렌더링을 수행하지만, useRef는 동일한 객체를 유지하면서 변경을 추적할 수 있다.
- useRef는 보통 렌더링 사이에서 유지해야 하는 값(예: 타이머 ID, 이전 값 저장 등)에 적합하며, useState는 UI 업데이트가 필요한 데이터에 적합하다.
4. 정리
- useRef는 DOM 요소 접근과 렌더링 영향 없이 값을 유지하는 데 사용된다.
- useState와 달리 값이 변경되어도 리렌더링이 발생하지 않는다.
- useEffect와 함께 활용하면 다양한 기능을 구현할 수 있다.
- 상태 변경이 필요하지 않은 경우 useRef를 사용하면 불필요한 렌더링을 방지할 수 있다.
728x90