핵심 답변
useRef는 두 가지 용도로 사용합니다.
DOM 요소에 직접 접근:
ref 속성으로 DOM 노드에 접근하여 focus(), scrollIntoView() 등 직접 조작렌더링 없이 값 유지:
.current를 변경해도 리렌더링이 발생하지 않으므로, 타이머 ID나 이전 값 저장 시 유용예시 코드
typescript
// DOM 접근
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
inputRef.current?.focus(); // 자동 포커스
}, []);
<input ref={inputRef} />
// 렌더링 없이 값 유지 (이전 값 추적)
const prevCountRef = useRef(0);
useEffect(() => {
prevCountRef.current = count; // 리렌더링 없이 업데이트
});
const prevCount = prevCountRef.current;핵심 용어
📌 .currentuseRef가 반환하는 객체의 속성으로, 실제 값 또는 DOM 노드에 접근할 때 사용합니다. 카드든 컨텍너 에 직접 접근하는 보에 같습니다.
📌 렌더링 유발 없음useState와 달리 ref.current를 변경해도 컴포넌트가 다시 렌더링되지 않습니다. 렌더링과 무관한 값 저장에 적합합니다.